脚本:
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.autocompleter.min.js" type="text/javascript"></script>
样式:
1 | <link rel="stylesheet" href="css/jquery.autocompleter.css"> |
---|
定义你的autocompleter:
$(function () {
$('input').autocompleter({ source: 'path/to/get_data_request' });
});
或用于本地JSON来源:
var data = [
{ "value": "1", "label": "one" },
{ "value": "2", "label": "two" },
{ "value": "3", "label": "three" }
];
$(function () {
$('input').autocompleter({ source: data });
});
如果你不会在源对象定义了一个值,标签将被用作后选择在输入字段的默认值。
插件后更改选项的定义:
1 | $('#input').autocompleter('option', data); |
---|
例如:
$('#input').autocompleter('option', {
limit: 5,
template: '<img src="{{ image }}" alt="Image for autocompleter list item" /> {{ label }}'
});
开放列表:
1 | $('#input').autocompleter('open'); |
---|
关闭页面:
1 | $('#input').autocompleter('close'); |
---|
摧毁插件:
1 | $('#input').autocompleter('destroy'); |
---|
清除所有缓存:
1 | $.autocompleter('clearCache'); |
---|
设置默认值:
1 2 3 | $.autocompleter('defaults', { customClass: 'myClassForAutocompleter' }); |
---|
例如:
Autocompleter第一名称输入缓存,匹配强调限制和5的结果。
形式:
<label for="gender_male">Male</label>
<input type="radio" name="gender" value="male" id="gender_male" checked="checked" />
<label for="gender_female">Female</label>
<input type="radio" name="gender" value="female" id="gender_female" />
<label for="firstname">First Name</label>
<input type="text" name="firstname" id="firstname" />
JavaScript:
$(function () {
$("#firstname").autocompleter({
limit: 5,
cache: true,
combine: function () {
var gender = $("input:radio[name=gender]:checked").val();
return {
gender: gender
};
},
callback: function (value, index) {
console.log( "Value "+value+" are selected (with index "+index+")." );
}
});
});
主要结构:
<div class="autocompleter" id="autocompleter-1">
<ul class="autocompleter-list">
<li class="autocompleter-item">First</li>
...
<li class="autocompleter-item">Last</li>
</ul>
</div>
实例:使用在Angular2客户端
size:any=0;
ngAfterViewInit() {
let thiss=this;
$('#autocomplete-ajax').autocomplete({
minChars:2,
lookup: function (query,done){
thiss.getProject(query, function () {
debugger;
if (thiss.rootList && thiss.rootList.length > 0 ) {
thiss.size=0;
thiss.tempurl=thiss.route.url
.map(s=>s)
let path=thiss.tempurl.source._value[0].path;
if(path!='qiyefengxian'){
thiss.List=[];
}
var result = {
suggestions: thiss.List
};
done(result)
}else{
thiss.size=1;
thiss.id='';
thiss.List=[];
var result = {
suggestions: thiss.List
};
done(result)
}
});
},
autoFill:true,
cacheLength:1,
matchContains: true,
onSelect: function (data) {
console.log("data",data)
thiss.rootEntity.gsName=data.value;
thiss.id=data.data;
thiss.find();//查询一条数据的方法
}
});
}
//根据名称模糊查询
getProject(name:any,callback: any):any{
let contion:any={
name:name
}
console.log("name",name)
this.httpService.find("Controller/selectName2",contion).then((response)=>{
if(response.json().data==null){
return false;
}
this.List=response.json().data;
if (typeof callback == "function") {
callback();
}
})
}
后台的查询结果,List<ResultEntity >
public class ResultEntity implements Serializable{
private String value;
private String data;
public String getValue() {
return value;
}
public void setValue(String value) {
this.value = value;
}
public String getData() {
return data;
}
public void setData(String data) {
this.data = data;
}
@Override
public String toString() {
return "ResultEntity [value=" + value + ", data=" + data + "]";
}
}