Всегда показывать строку в jQuery Autocomplete, даже если она не соответствует входной строке - PullRequest
Новая
       2

Всегда показывать строку в jQuery Autocomplete, даже если она не соответствует входной строке

0 голосов
/ 18 февраля 2019

Мне известен один и тот же вопрос, размещенный по адресу: Всегда показывать определенный выбор в jQuery Autocomplete, даже если он не соответствует вводу

Проблема заключается в использовании функции открытиякак предложено в качестве решения в вышеупомянутом вопросе, событие вызывается только тогда, когда в списке автозаполнения есть соответствующий элемент.Поэтому конкретный выбор не всегда отображается, когда пользователь печатает в поле поиска.

https://jsfiddle.net/u1jwz6s4/

<html lang="en">
<head>
<meta charset="utf-8">
<title>autocomplete demo</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>

<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">

</body>
</html>

$( "#autocomplete" ).autocomplete({
source: [ "c++", "java", "php", "coldfusion", "javascript", "asp",    "ruby" ],
open: function(){
$('.ui-autocomplete').prepend("search by keyword")
},
});

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

1 Ответ

0 голосов
/ 18 февраля 2019

Вы можете использовать опцию response для unshift строки search by keyword для массива отображаемых меток: 

const $input = $("#autocomplete");
$input.autocomplete({
  source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"],
  response: (event, ui) => {
    const label = 'search by keyword';
    ui.content.unshift({
      label,
      value: $input.val()
    });
  }
});
$(document).on('click', '.ui-autocomplete div:contains("search by keyword")', () => {
  console.log('searching for ' + $input.val());
});
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<label for="autocomplete">Select a programming language: </label>
<input id="autocomplete">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...