Форма автозаполнения, заполняемая базой данных?

#php #jquery #database #autocomplete

#php #jquery #База данных #автозаполнение

Вопрос:

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

Я работаю на PHP. В настоящее время код представляет собой простой выпадающий список, который вызывает файл базы данных для заполнения.

     <?php
    global $wpdb;
    $depts = $wpdb->get_results( "SELECT * FROM departments ORDER BY department_name ASC" );
    echo '<select>';

    foreach($depts as $row) {
        echo '<option name="select_dept" value="'.$row->department_id.'">'.$row->department_name.'</option>';
    }
    echo '</select>';
?>
  

Любая помощь была бы потрясающей!

Ответ №1:

Недавно я использовал эту библиотеку для автозаполнения — http://www.devbridge.com/projects/autocomplete/jquery / Итак, вот краткий скрипт, основанный на вашем:

 <?php

$query = isset($_GET['query']) ? $_GET['query'] : FALSE;

if ($query) {
    global $wpdb;
    // escape values passed to db to avoid sql-injection
    $depts = $wpdb->get_results( "SELECT * FROM departments WHERE department_name LIKE '".$query."%' ORDER BY department_name ASC" );

    $suggestions = array();
    $data = array();
    foreach($depts as $row) {
        $suggestions[] = $row->department_name;
        $data[] = $row->department_id;
    }
    $response = array(
        'query' => $query,
        'suggestions' => $suggestions,
        'data' => $data,
    );
    echo json_encode($response);
} else {
?>
<html>
<body>
<input type="text" name="" id="box" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script src="http://www.devbridge.com/projects/autocomplete/jquery/local/scripts/jquery.autocomplete.js"></script>

<script type="text/javascript">

$(document).ready(function(){
    $('#box').autocomplete({ 
        serviceUrl:'/',
        // callback function:
        onSelect: function(value, data){ alert('You selected: '   value   ', '   data); },
    }); 
});
</script>
</body>
<html>
<?}?>
  

Ответ №2:

Пожалуйста, следуйте этому очень хорошо написанному руководству

http://www.nodstrum.com/2007/09/19/autocompleter/

Комментарии:

1. Спасибо за быстрый ответ! Однако я рассматриваю «более дешевый» подход, просто используя javascript и php на одной странице и просто вызывая файл db.

2. @captainrad — вообще никаких проблем — однако я не уверен, насколько «дешевле» вы это получите

3. Не нажимайте на эту ссылку. Захват браузера!

Ответ №3:

Пользовательский интерфейс jQuery включает автозаполнение, хотя вам все равно нужно написать PHP-скрипт, чтобы вернуть информацию, которая будет добавлена в элемент управления, как это делается через AJAX. Если вы знаете на PHP, как подключиться к базе данных, запросить ее и вернуть список результатов — тогда у вас не возникнет проблем с этим. jQuery делает AJAX чрезвычайно простым.

В зависимости от того, насколько сложным является ваше поле / набор данных — и предполагая, что это не миллионы и миллионы неиндексированных записей, я был бы доволен автозаполнением из:

 SELECT thing WHERE thing LIKE '".$query."%'
  

Итак, если бы вы искали, скажем, еду … запрос «CA» вытащил бы морковь, капусту и цветную капусту. Если бы вы добавили % к началу LIKE, вы могли бы получить результаты, содержащие ваш запрос, в отличие от того, чтобы просто начинать с него.

Страница, на которую попадает ваш пользователь, будет содержать часть jQuery, которая одновременно отправляет запрос и создает эффект автозаполнения на основе результатов, и очень простой отдельный PHP-скрипт, к которому обращается запрос AJAX, который вернет потенциальные «совпадения».

Взгляните на демонстрации автозаполнения в пользовательском интерфейсе jQuery