可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I want to make auto complete text box for select employee names from the database. I don't have fair idea about that. But I tried to make it as following.

autocomplete.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

<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>

But it does not work. What is the correct way of make autocomplete text box.

回答1:

Try following code...

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>

autocomplete.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);

回答2:

you need to bind your input to the onchange action

Use this

$(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:

// 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>

回答4:

You haven't explained what exactly happend on that code but I think it is better to use this lib e.g. https://jqueryui.com/autocomplete/. There should be some examples of using this inside that package.