Question

我使用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'>$&</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" />

Answer 1

您可以将select选项添加到autocomplete的init函数中，并且可以在其中调用blur的{{1}}事件：

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'>$&</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()
  });
});

Answer 2

您可以简单地使用<cfhttpparam type="body" value="#serializeJson(mydata)#" />的{{3}}功能在选择搜索文本时触发一些操作。

此外，您还可以处理autoComplete，就像从标签event中获得data selected一样，也可以input进行呼叫和其他必要的操作ajax功能上需要的东西。

最后，从输入开始select，您需要使用focusout的{{3}}功能。

实时工作演示：

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'>$&</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()
  });
});

jQuery自动完成功能，选择项目时停止焦点

2 个答案: