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

Posted 2023-05-08

【中文标题】在 jquery 的自动完成中添加具有空值的自定义项

【英文标题】：Add custom item with null value in jquery's autocomplete

【发布时间】：2020-06-30 22:06:04

【问题描述】：

使用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。

【问题讨论】：

为什么不使用"" 而不是null？

【参考方案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 覆盖它。

【讨论】：

当您在列表中有 1 项可供选择时，它似乎会忽略它 很好！谢谢，我最终使用了另一个密钥，例如 id，所以它不会受到重置的影响