Question

在Chosen下拉插件中，在选择的下拉列表中键入2个字符后开始搜索。

我需要搜索才能在搜索框中输入至少两个字符后才开始。

任何人都可以建议如何做到这一点吗？

Answer 1

我做了一个小小的改动，开始搜索第三个字符后，不是最好的选择，但是在 AbstractChosen.prototype.winnow_results 函数中选择的JS后行 searchText = this.get_search_text（）; 添加以下代码： if（searchText！=“”＆amp;＆amp; searchText.length＆lt; 3）return; 。记得改变＆lt; 3你自己的大小。

希望这能帮到你

请参阅以下部分代码：

AbstractChosen.prototype.winnow_results = function() {
  var escapedSearchText, option, regex, regexAnchor, results, results_group, searchText, startpos, text, zregex, _i, _len, _ref;
  this.no_results_clear();
  results = 0;
  searchText = this.get_search_text();
  if (searchText != "" && searchText.length < 3) return;
  escapedSearchText = searchText.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");

Answer 2

我知道这则帖子很旧，但是我现在不得不面对这个问题，并想分享我的结果。我将所有内容包装在函数extendedSearch中，并将其设置为回调，同时被选择为发出chosen:showing_dropdown事件。

我的问题是我需要搜索才能在搜索中键入第二个字符后显示结果，并且必须从结果中过滤掉某些字符串。

在下面，您会发现一个 demo ，它会在键入的第三个字符上显示结果，并且只会保留以字母“ E ”结尾的结果。 / p>

$(function() {
  /**
   * By default the results are hidden when clicking a dropdown.
   * {
   *      toggleResults: false, // a function(searchValue) that returns a boolean
   *      filterResults: false, // a function(dropDownValue, selectValue) that returns a boolean
   *  }
   * @param options
   */
  const extendedSearch = (options = {}) => {

    const defaultOptions = {
      toggleResults: false,
      filterResults: false,
    };

    options = { ...{},
      ...defaultOptions,
      ...options
    };

    /**
     * Main element
     */
    return (evt, params) => {

      let originalElement = $(evt.currentTarget);
      let searchInput = params.chosen.search_field;

      const customSearch = (options = {}) => {

        let defaultOptions = {
          originalElement: null,
          searchInput: null
        };

        options = { ...{},
          ...defaultOptions,
          ...options
        };

        if (!(options.originalElement instanceof jQuery) || !options.originalElement) {
          throw new Error('Custom Search: originalElement is invalid.');
        }
        if (!(options.searchInput instanceof jQuery) || !options.searchInput) {
          throw new Error('Custom Search: searchInput is invalid.');
        }

        let res = options.searchInput
          .parent()
          .next('.chosen-results');

        res.hide();

        if (typeof options.toggleResults !== 'function') {
          options.toggleResults = (value) => true;
        }
        if (options.filterResults && typeof options.filterResults !== 'function') {
          options.filterResults = (shownText = '', selectValue = '') => true;
        }

        /**
         * Search Input Element
         */
        return (e) => {

          let elem = $(e.currentTarget);
          let value = elem.val() || '';

          if (value.length && options.toggleResults(value) === true) {

            res.show();

            if (options.filterResults) {

              let children = res.children();
              let active = 0;

              $.each(children, (idx, item) => {

                let elItem = $(item);
                let elemIdx = elItem.attr('data-option-array-index');
                let shownText = elItem.text();
                let selectValue = options.originalElement.find('option:eq(' + elemIdx + ')').attr('value') || '';

                if (options.filterResults(shownText, selectValue) === true) {
                  active++;
                  elItem.show();
                } else {
                  active--;
                  elItem.hide();
                }

              });

              if (active >= 0) {
                res.show();
              } else {
                res.hide();
              }

            }

          } else {
            res.hide();
          }


        };

      };

      options = {
        ...{},
        ...options,
        ...{
          originalElement,
          searchInput
        }
      };

      let searchInstance = customSearch(options);

      searchInput
        .off('keyup', searchInstance)
        .on('keyup', searchInstance)

    }

  };

  /** This is the final code */
  const inputValidator = (value) => {
    console.log('input', value);
    return $.trim(value).length > 2;
  };
  const textResultsValidator = (dropDownValue, selectValue) => {
    if ($.trim(dropDownValue).substr(-1, 1) === 'E') {
      console.log('results shown', dropDownValue, '|', selectValue);
      return true;
    }
    return false;
  };

  $(".chosen-select")
    .chosen()
    .on('chosen:showing_dropdown', extendedSearch({
      toggleResults: inputValidator,
      filterResults: textResultsValidator
    }));

});

@import url("https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.min.css")

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chosen/1.8.7/chosen.jquery.min.js"></script>


<select class="chosen-select">
  <option value="">Pick something</option>
  <option value="APPLE">APPLE</option>
  <option value="APPLE JUICE">APPLE JUICE</option>
  <option value="BANANA">BANANA</option>
  <option value="ANANAS">ANANAS</option>
  <option value="ORANGE">ORANGE</option>
  <option value="ORANGES">ORANGES</option>
  <option value="STRAWBERRY">STRAYBERRY</option>
</select>

在选择下拉列表中输入2个字符后开始搜索

2 个答案: