在 jquery 的自动完成中添加具有空值的自定义项

Add custom item with null value in jquery's autocomplete

使用jQuery's autotomplete widget,如果没有匹配的条件,我想添加一项。该项目添加得很好,但我面临的问题是我无法将该项目的值设置为 null。我得到的是项目的 valuelabel

具有相同的文本

示例代码:

source: function(request, response)
{
    //suggestions prefilled via AJAX...

    var items = [];

    if(suggestions.length)
    {
        for(var i in suggestions)
        {
            var item = suggestions[i];

            item.value = suggestions[i].id;
            item.label = suggestions[i].text;

            items.push(item);
        }
    }
    else
    {
        var item = {
            value : null,
            label : "some text..."
        };

        items.push(item);
    }

    response(items);
}

当我控制所选项目时,这是我得到的:

select: function(event, ui)
{
    console.log(ui.item.value);
    //if item's value was set to null, then label
    //if item's value was set to 0, then label
    //if item's value was set to "", then label
    //if item's value was set to 123, then 123
}

编辑:显然这在历史上的某个时刻奏效了...

在这个 fiddle with latest jquery and jquery ui the problem is present, but in this one 和 jquery 1.10.4 中,最后一个 jquery ui 以我想要的方式工作。

简短的回答,当列表中有 1 个项目来自 select 时,它似乎会忽略它。

示例:

https://jsfiddle.net/Twisty/6oa0yg24/2/

$(function() {
  var items = [{
      value: 1,
      label: 'neo'
    },
    {
      value: 2,
      label: 'trinity'
    },
    {
      value: 3,
      label: 'morpheus'
    },
    {
      value: null,
      label: 'smith'
    },
    {
      value: undefined,
      label: 'switch'
    },
    {
      value: "",
      label: 'tank'
    }
  ];

  $("#autocomplete").autocomplete({
    source: items,
    select: function(e, ui) {
      console.log(ui.item.value);
    }
  });
});

如果我们输入 t,我们会得到一些匹配,而 select smith,则该值留空。如果我们键入 sm,现在唯一的选项是 smith,然后添加 "smith" 作为值。为什么?我不知道,但我测试了所有三种情况,并且每种情况都做到了。很确定它归结为这些行(https://code.jquery.com/ui/1.12.1/jquery-ui.js 中的 5864 - 5869):

// reset the term after the select event
// this allows custom select handling to work properly
this.term = this._value();

this.close( event );
this.selectedItem = item;

我想如果你愿意的话,你可以用 Widget Factory 覆盖它。