js实现搜索提示框

用了ajax技术，输入关键字，输入框下面div实时出现搜索结果。

html 代码如下

<input type="text" name="brand" value="{$goods.brand|escape}" id="inputString" onblur="hideDiv()" onkeyup="lookup(this.value);"/>我从项目上直接拷贝下的，其实就是一input 
css部分

.suggestionsBox {
position: absolute;
z-index:100;
left: 30px;
margin: 65px 0px 0px 360px;
width: 140px;
/* height:300px;*/
background-color: gray;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border: 0px;
color: #fff;
}

.suggestionList {
margin: 0px;
padding: 0px;
}

.suggestionList li {
margin: 0px 0px 3px 0px;
padding: 3px;
cursor: pointer;
}

.suggestionList li:hover {
background-color: #659CD8;
}

位置是我根据项目中页面自己调的。要是换页面的话，margin自己再重新调
js部分

<script type="text/javascript" >

function lookup(inputString) {
if(inputString.length == 0) {
// Hide the suggestion box.
$('#suggestions').hide();
} else {
$.post("/xjctmall/includes/searchbrand.php", {queryString: ""+inputString+""}, function(data){
$('#suggestions').show();
if(data.length >1) {
$('#autoSuggestionsList').html(data);
} else{
$('#autoSuggestionsList').html("未搜到相关品牌");
}
});
}
} // lookup

function fill(thisValue) {
$('#inputString').val(thisValue);
$('#suggestions').hide();
}

function hideDiv(){
if($('#suggestions').text().indexOf('未搜到相关品牌')>0){
$('#suggestions').hide();
}
}
</script>需要引入jquery。本来项目中已经引过一次，我加这个功能时又引了一次，导致其它一个功能失效，后来我把我引的jq删掉就好了。
searchbrand.php代码如下：

<?php
$db = new mysqli('192.168.1.106', 'root' ,'xjgz123', 'c2ca5');
if(!$db) {
echo 'ERROR: Could not connect to the database.';
} else {
if(isset($_POST['queryString'])) {
$queryString = $_POST['queryString'];

if(strlen($queryString) >0) {
$db->query("set names UTF8");
$query = $db->query("SELECT brand_name FROM c2cm_brand WHERE brand_name LIKE '%$queryString%' LIMIT 10");

if($query) {
// While there are results loop through them - fetching an Object (i like PHP5 btw!).

while ($result = $query ->fetch_object()) {
$brand=$result->brand_name;
echo '<li onclick="fill(\''.$brand.'\');">'.$brand.'</li>';
}
} else {
echo 'ERROR: There was a problem with the query.';
}
} else {
// Dont do anything.
}
}
}

?>

本来项目中有自己连数据库的架构，可乱起八糟的太乱了，也不知道从哪里引，就直接自己写个连数据库，应该没什么关系吧？
效果截图如下



需要注意的地方

1.开始从数据库读回的汉字都是乱码，后来加上这句就好了$db->query("set names UTF8");

2.提示框div只写宽度不写高度，这样div就会根据结果自动伸缩。

3.当没有返回结果时输出提示语，我在做data的非空验证时发现未搜到数据时data.length是1，不是0.所以已data.length>1作为判断条件。不知道那是个空格还是个啥。

4.当非空提示出现时点击别处应该隐藏提示框div当我直接在onblur方法中hide这个div时发现fill方法失效，所以就加了个判断条件，本来是想将内容去掉空格和换行之后和“未搜到相关品牌”做==比较。可是js中去字符串空格和换行的方法不管用，就用的字符串包含的方法。