小编典典

jQuery UI自动完成:仅允许从建议列表中选择值

ajax

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

我将其用于标记系统,就像该站点上使用的标记系统一样,因此我只想允许用户从返回到自动完成插件的预填充列表中选择标记。


阅读 322

收藏
2020-07-26

共1个答案

小编典典

我遇到与选择未定义相同的问题。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); 
        }
    }
}
2020-07-26