【问题标题】:JQuery autocomplete not working with minLength 0 and custom stylingJQuery 自动完成不适用于 minLength 0 和自定义样式
【发布时间】:2017-12-23 12:55:39
【问题描述】:

我正在使用带有 Bootstrap 自定义样式的 jquery-ui 自动完成功能。

我遵循了示例here中给出的确切代码:

但是这似乎不适用于minLength: 0,即当我们单击输入框甚至输入一两个字符时,不会出现自动完成功能。但是,如果您在输入后退格并从输入框中删除所有内容,则会出现自动完成选项。它也没有搜索任何选项。

演示:JSFiddle

【问题讨论】:

    标签: javascript jquery jquery-ui autocomplete


    【解决方案1】:

    您只是在 source 数组中缺少一个 label 属性。这是 jQuery 自动完成比较用户输入的属性。这是更新的小提琴:https://jsfiddle.net/wa91nxmb/2/

    另外,这里是更改的代码部分:

     var coupons = [
        {
            coupon: 'abced',
            label: 'abced',
            desc: '50 OFF'
        },
        {
            coupon: 'GG_hijk',
            label: 'GG_hijk',
            desc: '75 OFF'
        },
    ];
    

    由于您希望在用户关注空文本框时显示所有选项,您可以绑定focus 事件并通过javascript触发搜索。

     $("#coupon").focus(function(){
            $(this).autocomplete("search", $(this).val());
     });
    

    【讨论】:

    • 之前我错过了当文本框为空时您还需要查看所有选项。顺便说一句,您需要 jQuery 的 label 属性来比较用户值。否则,当您在文本框中输入“ab”时,您将不会在结果中获得匹配选项。
    猜你喜欢
    • 2011-06-04
    • 1970-01-01
    • 1970-01-01
    • 2011-08-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多