前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >【jQuery进阶】自动补全插件autocompleter

【jQuery进阶】自动补全插件autocompleter

作者头像
用户5640963
发布2019-07-26 12:40:05
1.3K0
发布2019-07-26 12:40:05
举报
文章被收录于专栏:卯金刀GG

脚本:

代码语言:javascript
复制
<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:

代码语言:javascript
复制
$(function () {

    $('input').autocompleter({ source: 'path/to/get_data_request' });

});

或用于本地JSON来源:

代码语言:javascript
复制
var data = [

    { "value": "1", "label": "one" },

    { "value": "2", "label": "two" },

    { "value": "3", "label": "three" }

];

$(function () {

    $('input').autocompleter({ source: data });

});

如果你不会在源对象定义了一个值,标签将被用作后选择在输入字段的默认值。

方法:

插件后更改选项的定义:

1

$('#input').autocompleter('option', data);

例如:

代码语言:javascript
复制
$('#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的结果。

形式:

代码语言:javascript
复制
<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:

代码语言: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+")." );

        }

    });

});

主要结构:

代码语言:javascript
复制
<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客户端

代码语言:javascript
复制
    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 >

代码语言:javascript
复制
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 + "]";
	}
	

}
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 方法:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档