JQuery 自动完成不适用于 minLength 0 和自定义样式答案

【问题标题】：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”时，您将不会在结果中获得匹配选项。