Question

我想创建一个像Google搜索文本框一样的文本框...

我尝试的是当输入一个角色时，使用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;


?>

Answer 1

jquery中有一个有用的插件。

Jquery Autocomplete

可以使用简单的演示，只需将数组传递给它。

希望这对你有用。

Google搜索就像文本框一样

1 个答案: