自动填充,显示搜索字词结果?

时间:2014-04-06 17:43:19

标签: php jquery autocomplete autosuggest

一个简单的问题,是否有人知道如何让php脚本在数据库中搜索与自动完成搜索词相关的记录(如果这完全有意义的话)。

我想我想说的是,当你在Google上搜索某些内容然后,一旦你点击一个建议就会得到自动建议,该建议的结果会立即显示......有没有办法这样做?

4 个答案:

答案 0 :(得分:0)

基本上,您创建一个表单,该表单通过数据库(可能是LIKE查询)提供基于术语的建议的文件。

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

http://jqueryui.com/autocomplete/

答案 1 :(得分:0)

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

您要搜索的是一个jQuery自动完成插件,其中包含一系列onComplete操作,因此您可以在用户单击选项后显示结果。

就像这样一个例子: http://sourcery.devbridge.com/components/jquery-autocomplete/

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

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

答案 2 :(得分:0)

请试试这个:

这是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();
?>

答案 3 :(得分:0)

对此的最佳答案是:

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

?>