PHP, MYSQL Autocomplete does not working

前端未结

关注

 4  1786

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

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

0 讨论(0)

走了就别回头了

2021-01-28 04:40

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

0 讨论(0)

无人及你

2021-01-28 04:46

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
            }
        });
    });
});

0 讨论(0)

失恋的感觉

2021-01-28 04:51

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...