js实现搜索提示框

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

html 代码如下

<input  type="text" name="brand" value="{$goods.brand|escape}"  id="inputString" οnblur="hideDiv()" οnkeyup="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 οnclick="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中去字符串空格和换行的方法不管用，就用的字符串包含的方法。