جدول محتوایی
ساخت فرم جست و جوی لایو با Bootstrap Typeahead JS
در این مقاله قصد داریم از Bootstrap Typeahead JS برای ساخت فرم جست و جوی لایو پویا ، استفاده کنیم.
Typeahead را می توان autosuggest یا autocomplete نیز نامید. این برنامه نوعی ابزار است که برای پیش بینی زبان استفاده می شود. این ابزار توسط بسیاری از رابط های جستجو استفاده می شود. وقتی مشتریان چیزی را در نوار جستجو تایپ می کنند، پیشنهاداتی دریافت می کنند.
Typeahead زمانی که کاربر در نوار جستجو تایپ می کند، پیش بینی را ارائه می دهد تا استفاده کاربران را به اسان ترین شکل ممکن در بیاورد.
فرم های وب مدرن ابزارهای بسیار محبوبی برای جستجو دارند، یعنی فیلدهای ورودی تایپ. Typeahead معمولا برای بهبود تجربه کاربران استفاده می شود.
این ابزار در حالی که کاربر چیزی را جستجو می کند یا فرمی را پر می کند، به متن وارد شده توسط کاربر نگاه می کند. بر اساس این موارد، Typeahead نکات و لیستی از انتخاب های احتمالی را در اختیار کاربران قرار می دهد. جستجو می تواند از هر نوع باشد.
هنگامی که از Typeahead استفاده می کنیم، خطاهای احتمالی را کاهش می دهیم و همچنین می توانیم در زمان صرفه جویی کنیم زیرا در هنگام استفاده از این، کاربران اشتباهات املایی کمتری خواهند داشت.
ابتدا قصد داریم فایل html لازمه را ایجاد کنیم.
طرح بندی را با استفاده از فایل ajax.html ایجاد می کنیم. سپس کد JQuery و بوت استرپ را اضافه می کنیم.
Typeahead در فایل ajax.html قرار می گیرد. اگر بخواهیم چیزی در فرم جستجو بنویسیم، می‌توانیم جستجوی تکمیل خودکار پویا را دریافت کنیم. با استفاده از درخواست Ajax، این کار امکان پذیر است. بنابراین، فایل ajax.html ابتدا با استفاده از کد زیر ایجاد می شود:
پیش از ادامه ی مقاله ، در صورت نیاز به خرید سرور مجازی ایران به سایت ایرانیکاسرور مراجعه کرده و از پلن های فوق العاده با قیمت های عالی دیدن کنید.
ajax.html
<html lang="en">
<head>
<title> Example of Bootstrap Typeahead with Ajax </title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.1/bootstrap3-typeahead.min.js"></script>
</head>
<body>
<div class="row">
<div class="col-md-12 text-center">
<br/>
<h1> Example of Dynamic Autocomplete search using Bootstrap Typeahead JS</h1>
<input class="typeahead form-control" style="margin:0px auto;width:300px;" type="text">
</div>
</div>
<script type="text/javascript">
$('input.typeahead').typeahead({
source: function (query, process) {
return $.get('/ajaxpro.php', { query: query }, function (data) {
console.log(data);
data = $.parseJSON(data);
return process(data);
});
}
});
</script>
</body>
</html>
اکنون مثال ما به داده های JSON نیاز دارد
این داده ها را با ایجاد یک صفحه جدید و با درخواست Ajax دریافت خواهیم کرد. بنابراین در مثال زیر، یک صفحه دیگر فایل ajaxpro.php ایجاد خواهیم کرد. پس از آن کد زیر را اضافه می کنیم:
<?php
define (DB_USER, "root");
define (DB_PASSWORD, "root");
define (DB_DATABASE, "learn");
define (DB_HOST, "localhost");
$mysqli = new mysqli(DB_HOST, DB_USER, DB_PASSWORD, DB_DATABASE);
$sql = "SELECT items.title FROM items
WHERE title LIKE '%".$_GET['query']."%'
LIMIT 10";
$result = $mysqli->query($sql);
s$json = [];
while($row = $result->fetch_assoc()){
$json[] = $row['title'];
}
echo json_encode($json);
کد بالا ما آماده اجرا است. وقتی این کد را اجرا می کنیم، خروجی زیر را دریافت می کنیم:
و کارمون تمومه!
در این مقاله به نحوه ساخت فرم جست و جوی لایو جهت اسان سازی و بهبود تجربه کاربری پرداختیم. موفق باشید!