Як використовувати автозаповнення jQuery з Ajax

Останнє оновлення Жов 17, 2021

Ви хочете інтегрувати автозаповнення jQuery на свій веб-сайт? jQuery Autocomplete – це подібно до пошуку Google, де користувач вводить деякі літери, а результати, що відповідають набраним буквам, попередньо заповнюються.

Інтерфейс jQuery надає функцію автозавершення. Для використання цієї функції потрібно використовувати надані ними файли JS та CSS.

У цьому короткому навчальному посібнику ми візьмемо невеликий приклад і покажемо, як використовувати автозаповнення jQuery в Ajax.

Як приклад, візьмемо одне текстове поле. Коли користувач починає вводити букву в це поле, повинні з’являтися попередньо заповнені дані, з яких користувач може вибрати конкретну.

Як використовувати автозаповнення jQuery з Ajax

Скажімо, наше текстове поле призначене для імені користувача. Вам потрібно шукати ім’я, а записи імен зберігаються в базі даних.

Створіть index.htmlфайл і додайте в нього код нижче.

<html>
<head>
    <title>jQuery Autocomplete</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-2"></div>
            <div class="col-md-8">
                <div class="form-group">
                    <label for="exampleInputFname">First Name</label>
                    <input type="text" class="form-control" id="fnames" placeholder="First Name" name="fname">
                </div>
            </div>
            <div class="col-md-2"></div>
        </div>
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>

У наведеному вище HTML-коді я вказав ідентифікатор "fnames" у вікні пошуку. За цим ідентифікатором я б назвав метод автозавершення.

Далі напишемо код JavaScript, який використовує метод автозавершення, викличемо файл ajax, захопимо відповідь із файлу ajax і додамо до вікна пошуку.

<script type="text/javascript">
    $(function() {
        $("#fnames").autocomplete({
            source: function(term, response){
                $.getJSON('search.php', { q: term }, function(data){ response(data); });
            }
        });
    });
</script>

У search.phpфайлі нам потрібно отримати записи з бази даних, побудувати висновок у форматі масиву і, нарешті, використати json_encodeдля кодування масиву. Не забувайте використовувати, json_encodeінакше ви не отримаєте очікуваного результату.

<?php
$q = $_REQUEST['q']['term'];
 
//search in the database and get the result.
//for e.x. your database result is ['sam', 'sandy']
//json_encode the final output
echo json_encode(['sam', 'sandy']);
?>

Сподіваюсь, ви розумієте, як використовувати автозаповнення jQuery з Ajax у PHP. Ми хотіли б почути ваші думки в розділі коментарів нижче.

Пов’язані статті

Джерело запису: artisansweb.net