自动完成，显示搜索词结果？答案

【问题标题】：Autocomplete,display search term results?自动完成，显示搜索词结果？
【发布时间】：2014-04-06 17:43:19
【问题描述】：

一个简单的问题，有谁知道如何让 php 脚本在数据库中搜索与自动完成搜索词相关的记录（如果这有任何意义的话）。

我想我想说的是，当您在 Google 上搜索某些内容时，一旦您点击某个建议，就会收到自动建议，该建议的结果会立即显示...有没有办法这样做？

【问题讨论】：

标签： php jquery autocomplete autosuggest

【解决方案1】：

基本上，您创建一个表单，它通过数据库（可能是 LIKE 查询）向一个文件提供基于术语的建议。

您可以在客户端使用 JQueryUI 的自动完成功能。

http://jqueryui.com/autocomplete/

【讨论】：

【解决方案2】：

我想你知道如何制作一个基本的自动完成脚本，对吧？您想要的是在用户单击自动完成选项后立即显示结果。我对吗？

你要搜索的是一个 jQuery 自动完成插件，它有一个 onComplete 动作选择，这样你就可以在有人点击一个选项后显示结果。

比如这个： http://sourcery.devbridge.com/components/jquery-autocomplete/

您可以使用 Selected 选项通过 jQuery 使用 ajax 请求加载结果。

希望这能让你朝着正确的方向前进！

【讨论】：

【解决方案3】：

请试试这个：

这是 HTML 页面：

<!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=iso-8859-1" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script type="text/javascript">
$(function(){
$('#search_data').autocomplete({
source:'search_data.php', minLength:2
});
</script>
<title>Search</title>
</head>
<body>
<p><label for="term">Search for: </label> <input type="text" name="search_data" id="search_data"  /></p>
</body>
</html>

...这是 search_data.php 页面：

<?php
require 'config.php';
/* prevent direct access to this page */
/* Connect to database and set charset to UTF-8 */

// if the 'term' variable is not sent with the request, exit
if ( !isset($_REQUEST['term']) )
    exit;

// connect to the database server and select the appropriate database for use
$dblink = mysql_connect($hostname, $username, $password) or die( mysql_error() );
mysql_select_db($database);

// query the database table that match 'term'
$rs = mysql_query('select item_name from items where item_name like "'. mysql_real_escape_string($_REQUEST['term']) .'%" order by item_name asc limit 0,10', $dblink);

// loop through each result returned and format the response for jQuery
$data = array();
if ( $rs && mysql_num_rows($rs) )
{

    while( $row = mysql_fetch_array($rs, MYSQL_ASSOC) )
    {
        $data[] = array(
            'label' => $row['item_name'],
            'value' => $row['item_name']
        );
    }


}

// jQuery wants JSON data
echo json_encode($data);
flush();
?>

【讨论】：

感谢您的帮助。我尝试运行此代码并调整变量名称，但它不起作用。

【解决方案4】：

我们在这里有最好的答案：

<html>
	<head>
	</head>
	<body>
		<style type="text/css">
			input::-webkit-calender-picker-indicator{
				display: none;
			}
		</style>
		<h1>This form works on ajax</h1>
		<form id="theform">
			<input type="text" name="city" id="city" list="addlist" />
			<input type="submit" value="submit" />
		</form>
		<datalist id="addlist" class="response"></datalist>
		<!-- <div id='response'></div> -->
		
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
		
		<script>	
			$('document').ready(function(){
				$('#city').keyup(function(){
					if(!($('#city').val() == ''))
						{
						
					$('#response').html('<b>Loading....</b>');
					
					$.ajax({
						type: 'POST',
						url: 'jqueryfile.php',
						data: $(this).serialize()
					})
					.done(function(data){
						$('.response').html(data);
					})
					.fail(function(){
						alert('data not post');
					});
					return false;
				}else{$('#response').html('<span></span>');}
				});
			})
		</script>
		
	</body>
</html>

这是此的php代码：

<?php

    $city = $_POST['city'];
    $con = mysqli_connect('localhost', 'root', '', 'node');
    if(!$con)
        die("Error in connection");
    else
        echo "<br/>connected successfully";
    $sql = "select * from user_details where username like '".$city."%' limit 10";
    if(!$result = mysqli_query($con, $sql))
        die("error in query");
    else
        echo "<br/>data inserted Successfully";
        while($row = mysqli_fetch_array($result)){
            echo "<option id=".$row['user_id'].">".$row['username']."</option>";
        }

    mysqli_close($con);

?>

【讨论】：