Блог

После нескольких небольших побед с JS (все еще очень ученик) Теперь я унаследовал задачу, которая заключается в изменении вида редуктивного поиска.

Теперь пользователи хотят, чтобы поиск выполнялся с помощью кнопки отправки, а не ввода после 3-го символа. Я заполнял формы отправки раньше, где форма будет публиковаться, но я никогда не сталкивался с чем-то таким сложным, как это раньше.

Я просмотрел большой файл JS и нашел функцию поиска, которая содержит функцию keyup.

   F.initSearch = function(opts){
    if(!opts || !opts.ele){
      return;
    }
  
    if(!opts.start_length){
      this.opts.search.start_length = 2
    }
  
    this.$search_ele = $(this.opts.search.ele);
  
    if(this.$search_ele.length){
      this.has_search = true;
      this.searchFn = this.buildSearchFn(opts.fields);
      this.bindEvent(opts.ele, 'keyup');
    }
  };
 

Тем не менее, у меня возникают трудности с переходом от нажатия клавиши к нажатию кнопки.

Это то, что я сделал:

Я обновил форму, чтобы включить кнопку

    <form>
       <div class="searchBox">
         <input type="text" id="search" class="search__text-input" placeholder="Search"/>
       </div>
      
       <div class="formBox">
           <button id="searchbtn">Search</button>
       </div>     
   </form>
 

Я попытался обновить скрипт с помощью некоторого jquery, который следует тому же шаблону

 $( "#searchbtn" ).this.bindEvent(opts.ele, 'click');
 

Наконец, я попытался затем обновить существующий, что теперь оставляет меня несколько побежденным:

 F.initSearch = function(opts) {
    if(!opts || !opts.ele) {
        return;
    }
    if(!opts.start_length) {
        this.opts.search.start_length = 2
    }
    this.$search_ele = $(this.opts.search.ele);
    if(this.$search_ele.length) {
        this.has_search = true;
        this.searchFn = this.buildSearchFn(opts.fields);
        // this.bindEvent(opts.ele, 'keyup');

/* Trying to swap keyup for button click */

        $( "#searchbtn" ).this.bindEvent(opts.ele, 'click');



    }
};
 

Ссылка на JSFiddle: https://jsfiddle.net/mcmacca002/bo0y3u7p/2 /

Очевидно, что я подхожу к этому неправильно, и некоторые рекомендации были бы весьма признательны.