Php 类似谷歌搜索的文本框_Php_Jquery_Html_Ajax

Php 类似谷歌搜索的文本框

php jquery html ajax

Php 类似谷歌搜索的文本框,php,jquery,html,ajax,Php,Jquery,Html,Ajax,我想创建一个文本框像谷歌搜索文本框我尝试过的是，当输入一个字符时，使用AJAX，以该单词开头的单词将显示在一个div中。它工作正常，但我希望它应该像google搜索框一样工作。。现在，箭头键不起作用，只需单击文本即可被选中我的代码 <style> #resultDiv { width:154px; position:absolute; left:121px; top:30px; } p { padding:0px; margin:0px; } #resultDiv p:hove

我想创建一个文本框像谷歌搜索文本框

我尝试过的是，当输入一个字符时，使用AJAX，以该单词开头的单词将显示在一个div中。它工作正常，但我希望它应该像google搜索框一样工作。。现在，箭头键不起作用，只需单击文本即可被选中

我的代码

<style>
#resultDiv {
width:154px;
position:absolute;
left:121px;
top:30px;
}

p {
padding:0px;
margin:0px;
}
#resultDiv p:hover {
background-color:#999;
}
</style>
<script type="text/javascript">
$(document).ready(function(e) {
$('#resultDiv p').live('click',function(){
    var value = $(this).text();
    $('#word').val(value);
});
});
</script>

</head>

<body>
<form action="" method="post">
<label>Enter Your Word </label><input type="text" id="word"/>
<div id="resultDiv"></div>
</form>

<script>
// prepare the form when the DOM is ready 
$(document).ready(function() { 
$('#word').keyup(function(e) {
$.ajax({
        type: "POST",
        url: "googleDropSearch.php",
        data: "word="+this.value,
        success: function(msg){
            $('#resultDiv').html(msg);
            $('#resultDiv').css('border-left','1px solid #ccc').css('border-right','1px solid #ccc').css('border-bottom','1px solid #ccc');
        }
    });
});
});

</script>

</body>
</html>


#结果IV{
宽度：154px；
位置：绝对位置；
左：121px；
顶部：30px；
}
p{
填充：0px；
边际：0px；
}
#结果p：悬停{
背景色：#999；
}
$（文档）.ready（函数（e）{
$（'#resultDiv p'）.live（'click'，function（）{
var值=$（this.text（）；
$（'#word'）.val（值）；
});
});
输入你的话
//当DOM就绪时准备表单
$（文档）.ready（函数（）{
$（'#word'）.keyup（函数（e）{
$.ajax({
类型：“POST”，
url:“googleDropSearch.php”，
数据：“word=“+this.value，
成功：功能（msg）{
$（'#resultDiv'）.html（msg）；
$（'resultDiv'）.css（'border-left'，'1px solid#ccc'）.css（'border-right'，'1px solid#ccc'）.css（'border-bottom'，'1px solid#ccc'）；
}
});
});
});

动作页面

<?php
$connection = mysql_connect('localhost','root','') or die("ERROR".mysql_error());
$connection = mysql_select_db('ajax',$connection) or die("ERROR".mysql_error());

if(!empty($_POST)):
if(isset($_POST['word']) && $_POST['word'] != ''):
/****************
Sanitize the data
***************/
$key =$_POST['word'];
$query = mysql_query("SELECT county FROM fl_counties WHERE county LIKE '$key%';");

 $rows = mysql_num_rows($query);
 if($rows != 0):
while($result = mysql_fetch_array($query)):

echo "<p>".$result[0]."</p>";
endwhile;
endif;//rows > 0


endif;//county not sent

endif;


?>

jquery中提供了一个有用的插件

这里有一个简单的演示，你只需要向它传递一个数组
希望这对您有用。
欢迎使用Stack Overflow！请不要对新代码使用mysql.*
函数。它们不再得到维护，社区已开始恢复。看到了吗？相反，你应该学习并使用或。如果你不能决定，将帮助你做出选择。如果您想学习，。您已经在使用jquery了。选择一个自动完成插件，扩展到您的需要。它被称为自由软件，因为你可以自己改变它。live（）
也被弃用，取而代之的是on（）
我也有同样的问题。这个问题对我帮助很大。谢谢请不要对这些问题投反对票。明智地使用你的投票权。我还要求提问者接受以下答案，因为这似乎是合适的答案。谢谢