jQuery自动完成插件autocompleter

所属分类:输入-自动完成

 54349  85  查看评论 (19)
jQuery自动完成插件autocompleter ie兼容6

使用方法:

添加引用

最低要求:jquery.autocompleter.css和jquery.autocompleter.min.js。


脚本:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.autocompleter.min.js" type="text/javascript"></script>


样式:

<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 });
});

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


方法:

插件后更改选项的定义:

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


例如:

$('#input').autocompleter('option', {
    limit: 5,
    template: '<img src="{{ image }}" alt="Image for autocompleter list item" /> {{ label }}'
});


开放列表:

$('#input').autocompleter('open');


关闭页面:

$('#input').autocompleter('close');

摧毁插件:

$('#input').autocompleter('destroy');


清除所有缓存:

$.autocompleter('clearCache');


设置默认值:

$.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>
相关插件-自动完成

jQuery搜索框输入文字下拉提示菜单

jQuery搜索框提示,autocomplete输入框文字提示,搜索框提示文字,搜索框提示代码,搜索框提示功能
  自动完成
 31658  83

textarea标签行号

在textarea自动添加行号。
  自动完成
 9357  35

js大数计算插件

js大数计算,能轻松计算上百位数字的加减乘除。
  自动完成
 1228  -3

jquery聊天机器人

是一个会聊天的机器人还可以发表情哦
  自动完成
 3112  20

讨论这个项目(19)回答他人问题或分享插件使用方法奖励jQ币

    麦芽糖x 0
    2017/1/10 10:01:47

    为什么点击Delete键在onChange中会吧select给隐藏呢?有什么深意吗?

        麦芽糖x0
        2017/1/10 10:01:13

        在用Delete删除内容后就再点击文本框不会出现下拉列表了?怎么个情况,是我用的不对吗?

    回复
    小风风 0
    2016/12/25 17:12:41

    中文输入,回车确认不会触发判断~~~

    回复
    yuyu 0
    2016/9/23 9:09:21
    请问有AJAX方法的参数配置没有?自己写的不管用,谢谢 回复
    九幽令主 0
    2016/9/21 14:09:44
    我说错了,支持中文的,就是不知道结构为什么得和原来的结构一样?template: '{{ label }} ({{ hex }}{{ rgb }})', 这个必须使用label??楼主! 回复
    九幽令主 0
    2016/9/21 13:09:43
    好像是不支持中文,而且那个必须用lable吗? 回复
    勤劳的Coder 0
    2016/5/13 11:05:04
    好像是不支持中文哦? 回复
    はゃし №12 하건군 0
    2015/10/9 16:10:57

    ignoredKeyCode这个有什么作用?

    回复
    黄振.の 0
    2015/9/16 10:09:52

     这个挺不错的操作简介 要是支持中文就更好


    回复
    三石 0
    2015/5/19 9:26:36
    不支持中文???
        风亭0
        2017/7/25 19:25:47
        嗯,为什么不支持中文~?
    回复
    马铃薯先生 0
    2015/1/20 8:16:42
    这个太好了!! 回复
取消回复