Как использовать автозаполнение jQuery с Ajax

Последнее обновление Июл 12, 2021

Содержание

Вы хотите интегрировать jQuery Autocomplete на свой сайт? Автозаполнение jQuery похоже на поиск в 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"  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  src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script  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 >
    $(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