jQuery UI AutoComplete：只允许从建议列表中选择值

Posted 2023-03-05

【中文标题】jQuery UI AutoComplete：只允许从建议列表中选择值

【英文标题】：jQuery UI AutoComplete: Only allow selected valued from suggested list

【发布时间】：2011-06-24 12:54:47

【问题描述】：

我正在实现 jQuery UI 自动完成，我想知道是否有任何方法只允许从返回的 建议结果 中进行选择，而不是允许任何值输入到文本框中。

我将其用于标签系统，与本网站上使用的系统非常相似，因此我只想允许用户从返回到自动完成插件的预填充列表中选择标签。

【问题讨论】：

另见：***.com/a/15704767/5802289

【参考方案1】：

你也可以这样用：

change: function(event,ui)
  $(this).val((ui.item ? ui.item.id : ""));

我看到的唯一缺点是，即使用户输入了可接受项目的完整值，当他们将焦点从文本字段移开时，它也会删除该值，他们必须再次这样做。他们能够输入值的唯一方法是从列表中选择它。

不知道这对你是否重要。

【讨论】：

当您不使用 id 而只使用标签时，您可能希望使用它：（内部更改功能）if (!ui.item) $(this).val('');

当您通过按“Enter”键选择一个项目时 - ui 将始终为空。 jQuery UI v1.11.0

这个解决方案对我有用，没有你提到的副作用（从文本字段移动焦点时删除的值）。使用 jQuery 自动完成 v1.8 检查。

@collimarco 答案和您的评论都像一个魅力。我确实使用选项卡和输入键工作得更好。

【参考方案2】：

我遇到了同样的问题，未定义 selected 。为了安全起见，找到了解决方法并添加了 toLowerCase 函数。

$('#' + specificInput).autocomplete( 
  create: function () 
    $(this).data('ui-autocomplete')._renderItem = function (ul, item) 
      $(ul).addClass('for_' + specificInput); //usefull for multiple autocomplete fields
      return $('<li data-id = "' + item.id + '">' + item.value + '</li>').appendTo(ul); 
    ;
  , 
  change:
    function( event, ui )
      var selfInput = $(this); //stores the input field
      if ( !ui.item )  
        var writtenItem = new RegExp("^" + $.ui.autocomplete.escapeRegex($(this).val().toLowerCase()) + "$", "i"), valid = false;

        $('ul.for_' + specificInput).children("li").each(function() 
          if($(this).text().toLowerCase().match(writtenItem)) 
            this.selected = valid = true;
            selfInput.val($(this).text()); // shows the item's name from the autocomplete
            selfInput.next('span').text('(Existing)');
            selfInput.data('id', $(this).data('id'));
            return false;
          
        );

        if (!valid)  
          selfInput.next('span').text('(New)');
          selfInput.data('id', -1); 
        
    

【讨论】：

我不知道为什么链接到的例子让事情变得如此复杂。这个版本不需要额外的控制并且很容易理解：jsfiddle.net/jlowery2663/o4n29wn3

这对我不起作用。 select 是未定义的，我怀疑输入也是如此。您有实际测试过的版本吗？

【参考方案3】：

http://jsfiddle.net/pxfunc/j3AN7/

var validOptions = ["Bold", "Normal", "Default", "100", "200"]
previousValue = "";

$('#ac').autocomplete(
    autoFocus: true,
    source: validOptions
).keyup(function() 
    var isValid = false;
    for (i in validOptions) 
        if (validOptions[i].toLowerCase().match(this.value.toLowerCase())) 
            isValid = true;
        
    
    if (!isValid) 
        this.value = previousValue
     else 
        previousValue = this.value;
    
);

【讨论】：

在表单中有很多 jquery 函数时，表单是否有效？

如果您输入任何允许项目的子字符串，这将不起作用。

【参考方案4】：

这就是我对定居点列表的处理方式：

 $("#settlement").autocomplete(
  source:settlements,
  change: function( event, ui ) 
  val = $(this).val();
  exists = $.inArray(val,settlements);
  if (exists<0) 
    $(this).val("");
    return false;
  
 
);

【参考方案5】：

我只是在我的情况下修改代码并且它正在工作

selectFirst: true,
change: function (event, ui) 
        if (ui.item == null) 
         //here is null if entered value is not match in suggestion list
            $(this).val((ui.item ? ui.item.id : ""));
        
    

你可以试试

【讨论】：

尝试这个，但所有值都显示为空。无法选择任何内容

【参考方案6】：

Ajax 提交与处理

这将对你们中的一些人有用：

$('#INPUT_ID').autocomplete(
    source: function (request, response) 
        $.ajax(
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            url: autocompleteURL,
            data: "'data':'" + $('INPUT_ID').val() + "'",
            dataType: 'json',
            success: function (data) 
                response(data.d);
            ,
            error: function (data) 
                console.log('No match.')
            
        );
    ,
    change: function (event, ui) 
        var opt = $(this).val();

        $.ajax(
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            url: autocompleteURL,
            data: "'empName':'" + name + "'",
            dataType: 'json',
            success: function (data) 
                if (data.d.length == 0) 
                    $('#INPUT_ID').val('');
                    alert('Option must be selected from the list.');
                 else if (data.d[0] != opt) 
                    $('#INPUT_ID').val('');
                    alert('Option must be selected from the list.');
                
            ,
            error: function (data) 
                $(this).val('');
                console.log('Error retrieving options.');
            
        );
    
);

【参考方案7】：

我正在使用 drupal 7.38 和 在自动完成中只允许来自选择框的输入 您只需要在该点删除用户输入， js 不再需要它的地方 - 就是这种情况， 一旦搜索结果到达建议弹出窗口 在那里你可以保存设置：

 **this.input.value = ''**

请参阅下面的 autocomplete.js 摘录... 所以我复制了整个 Drupal.jsAC.prototype.found 对象 进入我的自定义模块并将其添加到所需的表单中 与

 $form['#attached']['js'][] = array(
  'type' => 'file',
  'data' => 'sites/all/modules/<modulname>_autocomplete.js',
 );

这里是 drupal 的原始 misc/autocomplete.js 的摘录 由那一行修改...

Drupal.jsAC.prototype.found = function (matches) 
  // If no value in the textfield, do not show the popup.
  if (!this.input.value.length) 
    return false;
  
  // === just added one single line below ===
  this.input.value = '';

  // Prepare matches.

=剪切。 . . . . .

【参考方案8】：

如果您想限制用户从自动完成列表中选择推荐，请尝试像这样定义关闭函数。当结果下拉关闭时调用 close 函数，如果用户从列表中选择，则定义 event.currentTarget，如果没有，则结果下拉关闭，无需用户选择选项。如果他们没有选择一个选项，那么我将输入重置为空白。

//
// Extend Autocomplete
//
$.widget( "ui.autocomplete", $.ui.autocomplete,       
   options: 
      close: function( event, ui ) 
         if (typeof event.currentTarget == 'undefined') 
            $(this).val("");
         
      
   
 );

【讨论】：

此代码示例可能正在回答一个问题，但尚不清楚它是否确实如此。请详细说明您的答案，以便更容易理解它的作用和原因。

虽然此代码 sn-p 可能是解决方案，但 including an explanation 确实有助于提高您的帖子质量。请记住，您是在为将来的读者回答问题，而这些人可能不知道您提出代码建议的原因。

【参考方案9】：

您实际上可以将response 事件与更改事件结合使用来存储建议的项目，如下所示：

response: function (event, ui) 
    var list = ui.content.map(o => o.value.toLowerCase());
,
change: function (event, ui) 
    if (!ui.item && list.indexOf($(this).val().toLowerCase()) === -1 )  $(this).val('');