Фильтр и поиск в списке с использованием ajax с php

Question

<div id="one"> 
    <label for="default">Without Ajax</label> 
    <input type="text" id="default" list="lang" placeholder="Select"> 

    <datalist id="lang"> 
    <option value="English"> 
    <option value="German"> 
    <option value="French"> 

    </option> 

</datalist> 
</div> 

Как преобразовать это кодирование в ajax с помощью php. Когда я нажимаю клавишу в тексте, мне нужно найти совпадение в списке и отобразить все совпадения в тексте.

Answer 1

Я предполагаю, что вы уже знаете, как получить данные из базы данных mysql, используя Php. И основные знания об использовании JQuery.

Первое, что вам нужно сделать, это импортировать библиотеку Jquery:

<script type="text/javascript" src="../js/jq.js"></script> 

Затем создать поле ввода. Если пользователь вход будет его запрос:

<input type="text" id="inp" name="inp"/></span> 

Затем создайте DIV, который мы будем использовать позже для отображения результатов:

<div class="results"></div> 

Объявить другой скрипт на головной части вашего проекта:

<script type="text/javascript"> 

</script> 

Внутри нового скрипта, который вы только что создали. Объявите функцию, которая будет прослушивать событие keyup.

Вот что происходит. Функция, которую вы объявили, будет отслеживать любые изменения в поле ввода, которое имеет идентификатор «inp». И каждый раз, когда вы нажимаете любую клавишу на клавиатуре. Действие, которое должно быть выполнено внутри этого события, будет выполнено.

Внутри функции блокировки. Объявите переменную, которая сохранит значение, введенное в поле ввода.

var inpvalue = $ ('# inp'). Val();

Следующее, что вам нужно сделать, это объявить другую функцию jquery. Это самая важная часть этого учебника, так как это будет тот, кто действительно получит значение из базы данных.

Теперь вам нужно показать результат запроса, изменив свойство html div с результатом класса. А параметр будет данные, выбранные из Аякса функции:

$(function(){ 
      $('#inp').keyup(function(){ 

      var inpval=$('#inp').val(); 

      $.ajax({ 
       type: 'POST', 
       data: ({p : inpval}), 
       url: 'listercust.php', 
       success: function(data) { 
        $('.result').html(data); 

      } 
     }); 
    }); 
}); 

Файл,

Первое, что вам нужно сделать, это объявить все соединения, необходимые для подключения к базе данных. Я не буду обсуждать это здесь со своей одной из основ.

Объявление переменной php, которая получит значение из ранее созданной функции ajax. Помните, что параметр «p» должен соответствовать значению, которое вы указали в функции ajax.

$name=$_POST['p']; 

Эта часть функции:

Все, что вам нужно сделать сейчас, чтобы сделать запрос, который будет использовать данные, введенные пользователем:

Затем отобразить значения выборки:

while ($ row = mysql_fetch_assoc ($ query)) { $ row ['name']; }

Вы можете решить, как должен выглядеть ваш php-файл и как вы хотите возвращать данные с php путем связи с моим sql.

Надеюсь, что эта помощь.