Блог

Главная - Вопросы по программированию - Автозаполнение Jquery, остановка фокусировки при выборе элемента

Автозаполнение Jquery, остановка фокусировки при выборе элемента

#javascript #html #jquery

#javascript #HTML #jquery — запрос #jquery

Вопрос:

Я использую для автозаполнения jquery. Фокус ввода сохраняется, когда я выполняю поиск и выбираю. Я не хочу «фокусироваться» при выборе. Поэтому, когда я ищу и выбираю veriseti_ismi_1, перестаньте фокусироваться на вводе. Как я могу сделать это для своего кода?

 $(function() {
  var availableTags = [
    "Veriseti_ismi_1",
    "Veriseti_ismi_2",
    "Veriseti_ismi_3",
    "Veriseti_ismi_4"
  ];

  var $elem = $("#tags").autocomplete({
      source: availableTags
    }),
    elemAutocomplete = $elem.data("ui-autocomplete") || $elem.data("autocomplete");
  if (elemAutocomplete) {
    elemAutocomplete._renderItem = function(ul, item) {
      var newText = String(item.value).replace(
        new RegExp(this.term, "gi"),
        "<span class='ui-state-highlight'>$amp;</span>");

      return $("<li></li>")
        .data("item.autocomplete", item)
        .append("<div>"   newText   "</div>")
        .appendTo(ul);
    };
  }

});

$('#tags').on('focusout', function(e) {
  let curElem = this;
  $('.ui-menu-item').each(function() {
    if ($(curElem).val() == $(this).text())
      $(this).hide()
  });
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="tags" type="text" />

Ответ №1:

Вы можете просто использовать функцию выбора autoComplete , чтобы вызвать что-то при выборе искомого текста.

Кроме того, вы также можете обрабатывать, event например, получать data вас selected по вашим тегам, input а также вы можете ajax совершать звонки и другие необходимые действия, необходимые для вашей select функции.

Наконец, чтобы focusout получить доступ к входным данным, вам нужно использовать функцию размытия() jQuery из ,,.

Живая Рабочая Демо-версия:

 $(function() {
  var availableTags = [
    "Veriseti_ismi_1",
    "Veriseti_ismi_2",
    "Veriseti_ismi_3",
    "Veriseti_ismi_4"
  ];

  var $elem = $("#tags").autocomplete({
      source: availableTags,
      select: function(x, i) { //select function
        $("#tags").blur(); //focus out
       //do other stuff
      },
    }),
    elemAutocomplete = $elem.data("ui-autocomplete") || $elem.data("autocomplete");
  if (elemAutocomplete) {
    elemAutocomplete._renderItem = function(ul, item) {
      var newText = String(item.value).replace(
        new RegExp(this.term, "gi"),
        "<span class='ui-state-highlight'>$amp;</span>");

      return $("<li></li>")
        .data("item.autocomplete", item)
        .append("<div>"   newText   "</div>")
        .appendTo(ul);
    };
  }


});


$('#tags').on('focusout', function(e) {
  let curElem = this;
  $('.ui-menu-item').each(function() {
    if ($(curElem).val() == $(this).text())
      $(this).hide()
  });
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="tags" type="text" />

Ответ №2:

Вы можете добавить select опцию к autocomplete init, которая является функцией и внутри нее может вызывать blur событие input :

 $(function() {
  var availableTags = [
    "Veriseti_ismi_1",
    "Veriseti_ismi_2",
    "Veriseti_ismi_3",
    "Veriseti_ismi_4"
  ];

  var $elem = $("#tags").autocomplete({
      source: availableTags,
      
      // NEW CODE
      select: function( event, ui ) {
       $("#tags").blur()
      }
      // END OD NEW CODE
    }),
    elemAutocomplete = $elem.data("ui-autocomplete") || $elem.data("autocomplete");
  if (elemAutocomplete) {
    elemAutocomplete._renderItem = function(ul, item) {
      var newText = String(item.value).replace(
        new RegExp(this.term, "gi"),
        "<span class='ui-state-highlight'>$amp;</span>");

      return $("<li></li>")
        .data("item.autocomplete", item)
        .append("<div>"   newText   "</div>")
        .appendTo(ul);
    };
  }

});

$('#tags').on('focusout', function(e) {
  let curElem = this;
  
  // To see it works
  
  console.log('blurred')
  $('.ui-menu-item').each(function() {
    if ($(curElem).val() == $(this).text())
      $(this).hide()
  });
});  
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input id="tags" type="text" />