如何强制Autosuggest限制对搜索结果的添加

时间:2013-08-05 09:00:21

标签: jquery autosuggest

有没有办法让jQuery Autosuggest插件限制用户只能实际添加搜索结果中包含的选择项,但不是新的

我的意思是如果我输入“joh”并且列表只显示“John”,那么我就不能将“Johnny”添加到所选项目中。

修改:我正在使用wuyuntao的版本。 您应该查看hlsolutions' one

2 个答案:

答案 0 :(得分:0)

我认为我设法做到了,但这基本上还原了Autosuggests在选择项目时所做的一切。

将此添加到选项哈希:

selectionAdded: function(elem) {
  var in_the_result_list = $.grep($('.as-results .as-list .as-result-item'), function(item) { return $(item).text() === elem.textNotChild() }).length;
  if (!in_the_result_list) {
    elem.remove();
    $('.as-input').html(elem.textNotChild());
    $('.as-values').val(function(i, current_value) {
      return current_value.replace(elem.textNotChild(), '');
    });
  }
}

也许有更好的方法可以做到这一点?

PS:我正在使用自定义jquery方法来获取没有“x”的元素文本,随意按照您想要的方式实现。如果您需要,这是方法:

(function ($) {
  function elementText(el, separator) {
    var textContents = [];
    for(var chld = el.firstChild; chld; chld = chld.nextSibling) {
      if (chld.nodeType == 3) { 
        textContents.push(chld.nodeValue);
      }
    }
    return textContents.join(separator);
  }
  $.fn.textNotChild = function(elementSeparator, nodeSeparator) {
  if (arguments.length<2){nodeSeparator="";}
  if (arguments.length<1){elementSeparator="";}
    return $.map(this, function(el) {
      return elementText(el,nodeSeparator);
    }).join(elementSeparator);
  }
} (jQuery));

答案 1 :(得分:0)

事实证明,有一个更好的维护版本的autosuggest插件已经具备此功能。看看这个:https://github.com/hlsolutions/jquery-autosuggest

从旧版本迁移到新版本是无痛苦的。它就像替换JS文件一样简单。