Блог

Главная - Вопросы по программированию - Как бы вы использовали автозаполнение jQuery с базой данных MySQL

Как бы вы использовали автозаполнение jQuery с базой данных MySQL

#php #mysql #jquery-ui

#php #mysql #jquery-пользовательский интерфейс

Вопрос:

Я хочу использовать термины, которые хранятся в таблице под названием terms со столбцами id и term

Как я мог бы использовать автозаполнение с базой данных вместо массива?

 <!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>

  <script>
  $(document).ready(function() {
    $("input#autocomplete").autocomplete({
        source: ["c  ", "java", "php", "coldfusion", "javascript", "asp", "ruby"]
    });
  });
  </script>
</head>
<body style="font-size:62.5%;">

<input id="autocomplete" />

</body>
</html>

Ответ №1:

вы можете получить массив с помощью вызова ajax или инициализировать при загрузке страницы что-то вроде

 <script>
var myArr = [<?php foreach($dbRows as $row){ echo ""$row['keyword']","} ?>];
</script>

Ответ №2:

Существует два способа подключения к базе данных. Общим для обоих является то, что вам нужен PHP (или другой язык), который будет подключаться к базе данных и подготавливать результаты для автозаполнения.

Первый способ — это то, как его описал Headshota. В этом решении PHP заполняет слова автозаполнения уже на HTML-странице.

Второе решение заключается в том, когда автозаполнение выполняет другой запрос к серверу, а затем загружает список слов. На демо-странице автозаполнения вы найдете внизу ссылку на исходный файл PHP. И в HTML-коде демонстрационной страницы вы найдете в разделе «Одиночная птица (удаленная)», как вы должны написать HTML / JavaScript-код.

Какой способ вы выберете, в основном зависит от количества строк в вашей таблице. Если у вас есть несколько сотен строк, я бы выбрал второе решение. Для меньшего объема данных первое решение тоже подходит.