使用jquery+ajax+thinkphp實現搜索框的功能

搜索框的原理：
客戶端：輸入要搜索的關鍵字於文本框，然后文本框將關鍵字獲取，使用ajax發送請求到服務端，然后根據服務端返回來的信息顯示到一個div中
服務端：接收傳過來的數據，然后在數據庫中搜索，再返回數據給客戶端

 

首先是客戶端
新建一個輸入框

    <input  type="text" id="keyword" name="keyword" />  

在輸入框的下面創建一個div，先讓他隱藏起來

<div id="searchBox" display: none"></div>  

js 發送jajx

<script type="text/javascript">
    $(document).ready(function() {
        var xhr = null;
        $('.zhuce_gongsimingcheng').keyup(function() {
            if (xhr) {
                xhr.abort(); //如果存在ajax的請求，就放棄請求  
            }
            var inputText = $.trim(this.value);
            if (inputText != "") { //檢測鍵盤輸入的內容是否為空，為空就不發出請求  
                xhr = $.ajax({
                    type: 'GET',
                    url: '{:U('Index/Index/get_ajax_crmname')}',
                    cache: false,
                    //不從瀏覽器緩存中加載請求信息  
                    data: "keyword=" + inputText,
                    //向服務器端發送的數據  
                    dataType: 'json',
                    //服務器返回數據的類型為json  
                    success: function(json) {
                        if (json.length != 0) { //檢測返回的結果是否為空  
                            var lists = "<ul>";
                            $.each(json,
                            function() {
                                lists += "<li>" + this.name + "</li>"; //遍歷出每一條返回的數據  
                            });
                            lists += "</ul>";
                            $("#searchBox").html(lists).show(); //將搜索到的結果展示出來
                            $('li').live('click',function(){
                                $(".zhuce_gongsimingcheng").val($(this).text()); //點擊某個li就會獲取當前的值
                                $("#searchBox").hide();
                            });
                        } else {
                            $("#searchBox").hide();
                        }
                    }
                });
            } else {
                $("#searchBox").hide(); //沒有查詢結果就隱藏搜索框
            }
        });
    });

</script>

php部份

	public function get_ajax_crmname(){
		if(I('keyword')){
			$keyword = I('keyword');
			$map['name'] = array('like','%'.$keyword.'%');
		}
		$crm_name = M('crm')->where($map)->order('id desc')->field('name')->select();
		$this->ajaxReturn($crm_name);
	}