Автозаполнение текстового поля PHP, jQuery and MySql

Содержание:

Создаем таблицы
index.php
autocomplete.php

В этом уроке я хочу показать вам, как легко сделать автоматическое заполнение текстового поля с JQuery PHP, MySql и.

Для начала скачаем autocomplete jQuery plugin и распаковываем на диск.
Затем создаем папку в localost. Копируем jquery.autocomplete.css и jquery.autocomplete.js файлы в папку проекта. И Вам нужен jquery.js. Сейчас запускаем проект.

Создаем таблицы

Чтобы создать таблицы, надо написать скрипт. Я добавляю данные в таблицу так.: импортирую этот код в phpmyadmin

CREATE TABLE `tag` (
  `id` int(20) NOT NULL auto_increment,
  `name` varchar(50) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=10 ;
INSERT INTO `tag` (`id`, `name`) VALUES
(1, 'php'),
(2, 'php frameword'),
(3, 'php tutorial'),
(4, 'jquery'),
(5, 'ajax'),
(6, 'mysql'),
(7, 'wordpress'),
(8, 'wordpress theme'),
(9, 'xml');

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Auto Complete Input box</title>
    <link rel="stylesheet" type="text/css" href="jquery.autocomplete.css" />
    <script type="text/javascript" src="jquery.js"></script>
    <script type="text/javascript" src="jquery.autocomplete.js"></script>
    <script>
        $(document).ready(function(){ $("#tag").autocomplete("autocomplete.php", { selectFirst: true }); });
    </script>
</head>
<body> <label>Tag:</label> <input name="tag" type="text" id="tag" size="20" /> </body>
</html>

к содержанию ↑

autocomplete.php

Этот файл использует jquery

<?php
 $q=$_GET['q'];
 $my_data=mysql_real_escape_string($q);
 $mysqli=mysqli_connect('localhost','username','password','databasename') or die("Database Error");
 $sql="SELECT name FROM tag WHERE name LIKE '%$my_data%' ORDER BY name";
 $result = mysqli_query($mysqli,$sql) or die(mysqli_error());
 if($result)
 {
  while($row=mysqli_fetch_array($result))
  {
   echo $row['name']."\n";
  }
 }

В результате мы видим вот это

<div class="separator">
    <figure><a href="https://web7.pro/wp-content/uploads/2015/12/autocomplete.png" rel="attachment wp-att-776"><img class="aligncenter size-full wp-image-776" src="https://web7.pro/wp-content/uploads/2015/12/autocomplete.png" alt="autocomplete" width="400" height="150"></a></figure>
</div>

Я использовал старую Jquery. Если Вы хотите изучить, то почитайте это и это.

Плагин рейтинга создан автором этого блога. Буду очень признателен, если вы сможете его поддержать (ссылка)

p.s. Если статья была полезной и вас переполняет чувство благодарности, можете поддержать меня долларом на патреоне