autocomplete用法小结

ajax获取数据处理

var toFactory8Code = $('#toFactory8Code').val();
                    if(toFactory8Code==""){
                        return;
                    }
                    $.ajax({
                        url:"getFactory8Storehouse",
                        type:"post",
                        async:false,
                        dataType:"json",
                        cache : false,
                        async:false,
                        drag:false,
                        data:{
                            "factory8Code":toFactory8Code
                        },
                        success:function(data){
                            if(data.indexOf("noData")<0){
                                var dataArray = data.substring(1,data.length-1).split(",");
                                var availableTags="[";
                                $.each(dataArray,function(index,item){
                                    availableTags += '{ value:"'+item+'",label:"'+item+'"},'
                                });
                                availableTags =availableTags.substr(0,availableTags.length-1);
                                availableTags+=']';
                                var storehouse=eval(availableTags);
                                $( "#storagLocation" ).autocomplete({
                                    source: storehouse
                                });
                                $( "#storagLocation").bind('keyup',function(obj){
                                    var inStorag=$(this).val().toUpperCase();
                                    $(this).val(inStorag);
                                    if(availableTags.indexOf(inStorag)>1){
                                    }else{
                                        inStorag = inStorag.substr(0,inStorag.length-1);
                                        $(this).val(inStorag);
                                        return;
                                    }
                                });
                            }else{
                                $('#toStorehouselist').children("li").remove();
                                $('#toStorehouseSelect').text("请选择库位");
                                $('#toStorehouse').val("");
                                $('#toStorehouselist').append("<li data-code='0'>请选择库位</li>");
                                alert('您所填入的调入工厂：'+toFactory8Code+'不存在!');
                                return;
                            }
                        },
                        error: function(){

                        }
                    });
           

页面输入框

<div class="Q-search-box Z-index-2" >
						<label>调入库位：</label>
                        <input id="storagLocation"   style="width: 110px" type="text" class="text buyInput material-Input-text" value=""/>

					</div>
           

设置自动完成下拉框

.ui-autocomplete{height:150px; overflow-y: scroll; overflow-x: hidden;}
           

后台获取数据方法

public String getFactory8Storehouse(String factory8Code) {
		
		if(factory8Code != null && !"".equals(factory8Code)){
			factory8Code = factory8Code.toUpperCase();
		}
		String result = null; // 库位编码字符串
		// 相应8工厂库位结果列表
		List<HrStorehouseGarderDTO> hrStorehouseGarderList = new ArrayList<HrStorehouseGarderDTO>();
		HrStorehouseGarderDTO hrStorehouseGarderDTO = new HrStorehouseGarderDTO();
		hrStorehouseGarderDTO.setFactory8Code(factory8Code);
		hrStorehouseGarderDTO.setType("1");
		hrStorehouseGarderList = hrStorehouseGarderDAO.selectStorehouseByFactory8(hrStorehouseGarderDTO);
		if(hrStorehouseGarderList.size() > 0){
			result = "";
			// 拼接库位编码字符串
			for(HrStorehouseGarderDTO hrStorehouseGarderDTO2 : hrStorehouseGarderList){
				result += hrStorehouseGarderDTO2.getStorehouse()+",";
			}
			result = result.substring(0,result.length()-1);
		}else{
			result="noData";
		}				
		return result;
	}