script:
1 2 |
|
style:
1 |
|
Define your autocompleter:
1 2 3 |
|
or for local JSON sources:
1 2 3 4 5 6 7 8 |
|
If you do not define a value in the source object, the label will be used as the default value in the input field after selection.
method:
Change the definition of the option after the plugin:
1 |
|
E.g:
1 2 3 4 |
|
Open list:
1 |
|
Close the page:
1 |
|
Destroy the plugin:
1 |
|
Clear all caches:
1 |
|
Set default value:
1 2 3 |
|
E.g:
Autocompleter 1st name input cache, matching emphasis limit and 5 results.
form:
1 2 3 4 5 6 |
|
JavaScript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
The main structure:
1 2 3 4 5 6 7 |
|
Example: use in Angular2 client
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();
}
})
}
Background query results, 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 + "]";
}
}