Показывать добавленную кнопку в раскрывающемся списке автозаполнения jquery пользовательского интерфейса после фокусировки ввода - PullRequest
Новая
       65

Показывать добавленную кнопку в раскрывающемся списке автозаполнения jquery пользовательского интерфейса после фокусировки ввода

0 голосов
/ 04 августа 2020

У меня есть поле ввода с автозаполнением, когда я печатаю внутри раскрывающегося списка автозаполнения, и внутри оператора open я добавляю кнопку в раскрывающийся список, все хорошо. Мне нужно, чтобы эта кнопка появлялась также, если в базе данных нет совпадений, особенно в minLength: 0 или после выбора поля. 

open: function(event, ui) {
  $('.ui-autocomplete').append('<li> <div type="button" class="btn-auto" onclick="showdrawer()">Add New</div></li>');
 },

1 Ответ

0 голосов
/ 04 августа 2020

Рассмотрим следующее на основе Демо: https://jqueryui.com/autocomplete/

$(function() {
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];

  function showdrawer() {
    console.log("Adding New");
  }

  $("#tags").autocomplete({
    source: availableTags,
    minLength: 0,
    open: function(e, ui) {
      var lastItem = $("<li>").css("border-top", "1px dashed #ccc").hover(function() {
        $(this).addClass("ui-state-highlight");
      }, function() {
        $(this).removeClass("ui-state-highlight");
      });
      $("<div>", {
        type: "button",
        class: "button-auto ui-menu-item-wrapper"
      }).html("Add New").click(function() {
        showdrawer();
        $("#tags").autocomplete("close");
      }).appendTo(lastItem);
      $('.ui-autocomplete').append(lastItem);
    }
  }).focus(function() {
    $("#tags").autocomplete("search", "");
  });
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

Вы можете попробовать сделать это с помощью точки расширения _renderMenu, но я думаю, что было бы проще просто добавить ее с помощью open.

...