输入框输入时实实检测输入内容并添加到输入框前面

输入框输入时实实检测输入内容并添加到输入框前面

<style type="text/css">
.glshop{ position:absolute;  width:100%; height:auto; min-height:34px;border:1px solid #e5e6e7; z-index:1111;}
.glshop.on{ border:1px solid #39aef5; box-shadow:#ccc 0 0 5px;}

.glshop .gl-input{height:34px;}
.glshop .gl-item{ border:1px solid #e5e6e7; padding:0px 5px; line-height:20px; cursor:pointer; float:left; margin-top:4px; margin-left:5px;}
.glshop .gl-item span{ display:inline-block; margin-right:5px; vertical-align:1px;}
.glshop .intxt{ border:0px; padding:0px; height:22px; float:left; margin-left:5px; margin-top:4px;}

.glshop .gl-son{ box-sizing:border-box; left:0px; background:#fff; top:34px; width:100%; border-top:0px; display:none;}
.glshop .gl-son p{ line-height:35px; margin:0px;}
.glshop .gl-son p.no{ background:#f0f0f0; padding:0 12px;}
.glshop .gl-son p a{ display:block; line-height:35px; padding:0 12px;}
.glshop .gl-son p a:hover{ background:#39aef5; color:#fff;}
</style>
<div style="position:relative;">
  <div class="glshop">
    <div class="gl-input">
      <input type="text" class="intxt" id="glinput" οnfοcus="glshop(this)" />
    </div>
    <div class="gl-son">
      <p class="no">请输入一个字符</p>
    </div>
  </div>
</div>
<script type="text/javascript">

$(function(){
  //关联商家匹配-输入时显示查询列表
  $('#glinput').bind('input propertychange', function() {  
	  var store_name = $(this).val();  
	  var son = $(this).parent().next();
	  son.find("p").remove();
	  var url = "{:U('AdminStore/getStoresInfo')}";
	  $.ajax({
		   type:'POST',
		   async:false,
		   url:url,
		   data:{store_name:store_name},
		   success:function(rs){
			  var data = JSON.parse(rs);
			  console.log(data);
			  if(data.status==0){
				 var html="";
				 $.each(data.data,function(i,o){						   
					  html+= '<p><a href="javascript:void(0)" οnclick="getStoreName(this)" data='+o.store_id+'>'+o.store_name+'</a></p>';
				 })   
				 son.append(html);
			  }else{
				  son.append('<p>没有找到匹配项</p>');
			  }
		   }
	  });
  });	
  
  //关联商家匹配-点击该框其他地方则隐藏  
  $(document).bind("click",function(e){ 
	var target = $(e.target); 
	if(target.closest(".glshop").length == 0){ 
		$(".glshop").removeClass("on");
		$(".gl-son").hide();
		$(".glshop .intxt").val('');
		$(".gl-son").html("<p class='no'>请输入一个字符</p>");
	} 
  }) 
 
})

//关联商家匹配-显示
function glshop(o){
	$(o).parent().parent().addClass("on");
	$(o).parent().next().show();		
}
//关联商家匹配-点击获取商家
function getStoreName(o){		
	var store_name = $(o).text();
	var store_id   = $(o).attr("data");		
	var html = '<div class="gl-item"><input type="hidden" name="store_ids[]" value="'+store_id+'" /><span οnclick="removegl(this)">x</span>'+store_name+'</div>';
	var len = $(".gl-item").length;
	//存在相同的商家则移除
	$(".gl-item").each(function(index, element) {
		var id = $(this).find("input").val();
		if(id==store_id){ $(this).remove(); }
	});
	//只允许添加5个商家
	if(len<5){
		$(".gl-input").prepend(html);
	}
	$(".glshop").removeClass("on");
	$(".gl-son").hide();
	$(".glshop .intxt").val('');
	$(".gl-son").html("<p class='no'>请输入一个字符</p>");
}

//关联商家匹配-移除
function removegl(o){
	$(o).parent().remove();
}
</script>