谷歌搜索一样文本框

上午想创建一个像谷歌搜索文本框中的文本框...谷歌搜索一样文本框

我曾尝试是，当输入的字符，使用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; 


?>

来源

2012-07-11 Triveni

欢迎来到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

jQuery中有一个有用的插件可用。

Jquery Autocomplete

没有可用简单的演示，你只需要一个数组传递给它。

希望这会对你有用。

来源

2012-07-11 10:10:08

谷歌搜索一样文本框

回答

相关问题