1
上午想创建一个像谷歌搜索文本框中的文本框...谷歌搜索一样文本框
我曾尝试是,当输入的字符,使用AJAX开始这个词的话会显示在DIV其工作正常,但我想,它应该工作完全像谷歌搜索框。现在箭头键不通过单击文本唯一的工作将被选中
我的代码
<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>
的操作页面
<?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;
?>
欢迎来到Stack Overflow!请不要将'mysql_ *'函数用于新代码。他们不再被维护,社区已经开始[弃用流程](http://goo.gl/KJveJ)。请参阅[**红框**](http://goo.gl/GPmFd)?相反,您应该了解[准备好的语句](http://goo.gl/vn8zQ)并使用[PDO](http://php.net/pdo)或[MySQLi](http://php.net/ mysqli的)。如果你不能决定,[本文](http://goo.gl/3gqF9)将有助于选择。如果你关心学习,[这里是很好的PDO教程](http://goo.gl/vFWnC)。 – ManseUK 2012-07-11 09:39:42
你已经在使用jQuery。选择一个自动完成插件,将其扩展到您的需求。这就是所谓的免费软件,因为你可以改变它自己的。 – hakre 2012-07-11 09:39:45
'live()'也被弃用于'on()' – ManseUK 2012-07-11 09:40:44