laravel搜索选择框+ajax异步搜索

laravel搜索选择框+ajax异步搜索

先看效果：

这些数据全部是ajax 异步搜索过来的。这样完美避免了数据台多渲染页面卡的问题。
原理呢 就是吧layui 解析出的代码粘出来，然后加上自己的代码，改改就好了。

代码块

1、

<div class="layui-inline">
        <label class="layui-form-label">搜索选择框</label>
        <div class="layui-input-inline">
            <div class="layui-form-select layui-form-selected searchDiv">
                <div class="layui-select-title">
                    <input type="text" placeholder="直接选择或搜索选择" value="" data-id=''  class="layui-input search_input" >
                    <i class="layui-edge edge" style="transform: rotate(0deg);" ></i>
                </div>
                <dl class="layui-anim layui-anim-upbit" style="display: none;">
                    <dd lay-value=""   class="dddclick layui-select-tips layui-this">直接选择或搜索选择</dd>
                    <dd lay-value="4"   class="dddclick ">element</dd>
                    <dd lay-value="5"   class="dddclick ">laytpl</dd>
                    <dd lay-value="6"   class="dddclick ">upload</dd>
                    <dd lay-value="7"   class="dddclick ">laydate</dd>
                    <dd lay-value="8"   class="dddclick ">laypage</dd>
                    <dd lay-value="9"   class="dddclick ">flow</dd>
                    <dd lay-value="10"   class="dddclick ">util</dd>
                    <dd lay-value="11"   class="dddclick ">code</dd>
                    <dd lay-value="12"   class="dddclick ">tree</dd>
                    <dd lay-value="13"   class="dddclick ">layedit</dd>
                    <dd lay-value="14"   class="dddclick ">nav</dd>
                    <dd lay-value="15"   class="dddclick ">tab</dd>
                    <dd lay-value="16"   class="dddclick ">table</dd>
                    <dd lay-value="17"   class="dddclick ">select</dd>
                    <dd lay-value="18"   class="dddclick ">checkbox</dd>
                    <dd lay-value="19"   class="dddclick ">switch</dd>
                    <dd lay-value="20"   class="dddclick ">radio</dd>
                </dl>
            </div>
        </div>
    </div>
    <script>
     layui.use(['form', 'jquery','layer'], function(){


			 $(".search_input").keyup(function(event){

		      //alert(event.keyCode)
		      //layer.msg(event.keyCode);
		      if(event.keyCode==40){      //方向健↓
		        //如果是最后一个则不用做任何事情
		        if($(this).parent().next("dl").children(":last").hasClass("layui-this")){
		          return;
		        }
		        $(this).parent().next("dl").find("dd.layui-this").removeClass("layui-this").next("dd").addClass("layui-this");
		        $dl=$(this).parent().next("dl");
		        $dl.scrollTop($dl.scrollTop()+$dl.find("dd.layui-this").height());
		        return;
		      }
		
		      if(event.keyCode==38){ //方向健↑
		        //如果是第一个则不用做任何事情
		        if($(this).parent().next("dl").children(":first").hasClass("layui-this")){
		          return;
		        }
		        $(this).parent().next("dl").find("dd.layui-this").removeClass("layui-this").prev("dd").addClass("layui-this");
		        $dl=$(this).parent().next("dl");
		        $dl.scrollTop($dl.scrollTop()-$dl.find("dd.layui-this").height());
		        return;
		      }
		
		      if(event.keyCode==13){         //按回车键给文本框赋值
		        var text = $(this).val($(this).parent().next("dl").find("dd.layui-this").html());
		        oldValue=$(this).val().trim();
		        return;
		      }
		
		      if(oldValue!=$(this).val().trim()){ //如果输入框的值没有改变就没必要发送ajax请求
		        //根据用户输入的内容发送ajax请求查询以此内容开头的商品简码，从而查出符合要求的商品名字
		        $.get("getProductsByCode",{"productCode":$(this).val()},function(data){
		          if(!!data){
		            //清除掉以前的值
		            $(".searchDiv dl.layui-anim").html("");
		            for(var i=0;i<data.length;i++){
		              $(".searchDiv").find("dl.layui-anim").append("<dd lay-value=\""+data[i].id +"\"  class=\"dddclick\" >"+data[i].mod_name+"</dd>");
		              $(".searchDiv").find("dl.layui-anim").children("dd:first").addClass("layui-this");
		            }
		            //重新渲染select
		            //form.render('select');
		          }
		        },'json')
		      }
		    })


		    $(document).on('click','.dddclick',function (event) {
		//      $('.dddclick').click(function (event) {
		        event.stopPropagation();
		        var dl = $(this).parent();
		        var id = $(this).attr('lay-value');
		        var text = $(this).text();
		        var input = $(this).parent().prev().children('input');
		        //添加选中样式
		        $(this).addClass('layui-select-tips');
		        $(this).addClass('layui-this');
		        //删除其他的选中样式
		        $(this).siblings().removeClass('layui-select-tips')
		        $(this).siblings().removeClass('layui-this')
		
		        //设置input 选中的属性
		        input.val(text);
		        input.attr('data-id',id)
		
		        dl.hide();
		      })
			$('.search_input').blur(function (e) {
			      var obj = $(this);
			      var dl = $(this).parent().next().children();
			
			      if(dl.length <= 0 ){
			        var defaulSelectModel = $('#difaultSelectModel').html();
			        $(this).parent().next().html(defaulSelectModel);
			      }
			      setTimeout(function(){ obj.parent().next().hide() }, 100);
			
			    })
			     $('.search_input').focus(function (e) {
				//      var ev = e || window.event;
				//      if(ev && ev.stopPropagation) {
				//        //非IE浏览器
				//        ev.stopPropagation();
				//      } else {
				//        //IE浏览器(IE11以下)
				//        ev.cancelBubble = true;
				//      }
				      $(this).parent().next().show()
				//        e.stopPropagation()
				    })
      });
    </script>

这块由于最近有点忙，以后抽时间写的更细点。若有哪里不合适欢迎评论。