PHP，MYSQL 自动完成功能不起作用答案

【问题标题】：PHP, MYSQL Autocomplete does not workingPHP，MYSQL 自动完成功能不起作用
【发布时间】：2016-09-17 09:47:50
【问题描述】：

我想为从数据库中选择员工姓名制作自动完成文本框。我对此没有公平的想法。但我试图使它如下。

自动完成.php

<?php
include 'func/db_connect.php';

if (isset($_POST['query'])) 
{
    $query = $_POST['query'];
    $mysql_query = mysql_query("SELECT * FROM employee WHERE name LIKE '%{$query}%'");

    while ($row = mysql_fetch_assoc($mysql_query)) 
    {
        $array[] = $row['name'];
    }
    echo  json_encode ($array);
}

js 脚本

<script>
    $('#typeahead').typeahead({
        source: function(typeahead, query){
            $.ajax({
                url: 'autocomplete.php',
                type: 'POST',
                data: 'query=' + query,
                dataType: 'JSON',
                async: 'false',
                success: function(data){
                    typeahead.process(data);
                }
            });
        }
    });
</script>

index.php

<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.min.css" />
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>

                    <td><b>Employee name : </td>
                    <td>
                        <input type="text" id="typeahead" data-provide="typeahead" size="30">
                    </td>

但它不起作用。制作自动完成文本框的正确方法是什么。

【问题讨论】：

如果您还提供指向您正在使用的插件的链接将会很有帮助。

标签： php jquery mysql autocomplete

【解决方案1】：

您还没有解释该代码到底发生了什么，但我认为最好使用这个库，例如https://jqueryui.com/autocomplete/。在那个包里面应该有一些使用这个的例子。

【讨论】：

这不能回答问题。如果您想了解更多信息，请对问题发表评论。

【解决方案2】：

您需要将输入绑定到 onchange 操作

使用这个

$(document).ready(function(){
    $("#typeahead").change(function(event){
        var query = document.getElementById('typeahead').value;
        jQuery.ajax({
            url: 'autocomplete.php',
            type:'POST',
            data:{'query':query},
            dataType: 'JSON',
            cache:false,
            success:function(data){
                // Do Anything You want here
            },
            error:function(){
                // Do something else here
            }
        });
    });
});

【讨论】：

【解决方案3】：

试试下面的代码...

html

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/minified/jquery-ui.min.css" type="text/css" /> 

<p><label>Country:</label><input type='text' name='country' value='' class='auto'></p>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.min.js"></script>


<script type="text/javascript">
$(function() 
{
    $(".auto").autocomplete({
        source: "autocomplete.php",
        minLength: 1
    });
});
</script>

自动完成.php

<?php

mysql_connect("localhost", "root", "")or die("cannot connect"); 
mysql_select_db("test")or die("cannot select DB");

$query = $_GET['term'];

$mysql_query = mysql_query("SELECT * FROM users WHERE name LIKE '%{$query}%'");

while ($row = mysql_fetch_assoc($mysql_query))
{
    $array[] = $row['name'];
}
echo  json_encode ($array);

【讨论】：

我应该安装jquery插件吗？
不，我提供所有实时 jquery url，所以无需添加任何内容，只需检查数据库设置
你做了什么改变？
仅数据库设置
数据库有你查到的记录？

【解决方案4】：

// create search.php

<?php
$dbHost = 'localhost';
$dbUsername = 'root';
$dbPassword = '';
$dbName = 'company_db';
//connect with the database
$db = new mysqli($dbHost,$dbUsername,$dbPassword,$dbName);
//get search term
$searchTerm = $_GET['term'];

$query = $db->query("SELECT * FROM employee WHERE name LIKE '%".$searchTerm."%' ORDER BY name ASC");
while ($row = $query->fetch_assoc()) {
    $data[] = $row['name'];
}
//return json data
echo json_encode($data);
?>


// SQL

CREATE TABLE IF NOT EXISTS `employee` (
  `id` int(11) NOT NULL,
  `name` varchar(255) COLLATE utf8_unicode_ci NOT NULL
) ENGINE=InnoDB AUTO_INCREMENT=26 DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

--
-- Dumping data for table `employee`
--

INSERT INTO `employee` (`id`, `name`) VALUES
(1, 'Ram'),
(2, 'Ravi'),
(3, 'Kumar'),
(3, 'Aaathava'),
(4, 'Sasi');

// End


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Autocomplete textbox </title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#typeahead" ).autocomplete({
      source: 'search.php'
    });
  });
  </script>
</head>
<body>
 
<div class="ui-widget">
  <label for="typeahead">Employee name: </label>
  <input type="text" id="typeahead" data-provide="typeahead" size="30">
</div>
</body>
</html>

【讨论】：