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

Question

使用jQuery's autotomplete widget，如果没有条件匹配，我想添加一项。该项目添加得很好，但我面临的问题是我无法将该项目的值设置为null。我得到的是该项目的value，其文本与label 相同

示例代码：

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
}

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

在这个带有最新 jquery 和 jquery ui 的 fiddle 中，问题存在，但在带有 jquery 1.10.4 的 this one 中是最后一个按我想要的方式工作的 jquery ui。

Answer 1

简短的回答，当您在列表中有 1 项可供选择时，它似乎会忽略它。

例子：

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，我们会得到一些点击，然后选择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 覆盖它。