使用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);
	}