В этом уроке я хочу показать вам, как легко сделать автоматическое заполнение текстового поля с 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. Если статья была полезной и вас переполняет чувство благодарности, можете поддержать меня долларом на патреоне
Показать комментарии
