Я использую Typeahead.js в текстовом вводе автозаполнения, и это здорово. Но мне нужно активировать раскрывающееся меню со всеми доступными параметрами, когда вход становится фокусом. Каждое возможное решение, которое я видел, включает инициализацию ввода с некоторым значением, но мне нужно показать все параметры.
Как я мог достичь этого?
Вам нужно использовать опцию minLength: 0
Примечание:
Здесь pull request, который решил эту проблему
Любой ответ, который говорит, что "minLength: 0 - это все, что вам нужно", НЕ ИСТИНА.
"Out Of The Box" Typeahead v0.11.1 "нужна" minLength, установленная в 0, но ТАКЖЕ, если вы используете из коробки "Бладхаунд Мотор", тогда вам нужно обязательно установить
identify: function(obj) { return obj.team; },
на ваш объект Bloodhound.
Вам также нужна функция "средний человек" для обработки вашего "пустого запроса", в котором вы скажете Bloodhound для сотрудничества.
function nflTeamsWithDefaults(q, sync) {
if (q === '') {
sync(nflTeams.all()); // This is the only change needed to get 'ALL' items as the defaults
} else {
nflTeams.search(q, sync);
}
}
Здесь вы можете увидеть ПОЛНЫЙ ПРИМЕР.
var nflTeams = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('team'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
identify: function(obj) { return obj.team; },
prefetch: '../data/nfl.json'
});
function nflTeamsWithDefaults(q, sync) {
if (q === '') {
sync(nflTeams.all()); // This is the only change needed to get 'ALL' items as the defaults
}
else {
nflTeams.search(q, sync);
}
}
$('#default-suggestions .typeahead').typeahead({
minLength: 0,
highlight: true
},
{
name: 'nfl-teams',
display: 'team',
source: nflTeamsWithDefaults
});
БОЛЕЕ СПЕЦИАЛЬНО ВЫ МОЖЕТЕ СМОТРЕТЬ ОФИЦИАЛЬНОЕ ТИПИТОРНОЕ ТИПОВОЕ ПОЛОЖЕНИЕ ПО УМОЛЧАНИЮ ПО ПРИНЦИПУ ФОКУСА В СЛЕДУЮЩЕМ АДРЕСЕ С ПРОСТЫМ ИЗМЕНЕНИЕМ ОТ .get() TO.all() (СМОТРЕТЬ ВЫШЕ ИЛИ НИЖЕ)
http://twitter.github.io/typeahead.js/examples/#default-suggestions
... надеюсь, что это помогает кому-то, так как мне понадобилось некоторое время, чтобы найти эту информацию (найти ее, выполнив все отчеты об ошибках и экспериментируя, чтобы найти метод .all()).
Я сделал быструю модификацию к 10.2, которая сделала пример "основы" найденный здесь в фокусе.
i изменил mixin _onFocus (строка 1459) FROM:
_onFocused: function onFocused() {
this.isActivated = true;
this.dropdown.open();
},
TO:
_onFocused: function onFocused() {
this.isActivated = true;
var val = this.input.getInputValue();
var query = Input.normalizeQuery(val);
this.dropdown.update(query);
this.dropdown.open();
},
Он вряд ли официально, но он выполнил свою работу.
Здесь проще сделать это без изменения источника. Возможно, источник изменился с тех пор, как это было изначально ответило, но я подумал, что это стоит на всякий случай.
После создания typeahead:
var $element = $('#myTextElement');
$element.typeahead({ source: ['Billy', 'Brenda', 'Brian', 'Bobby'] });
Просто установите для параметра minLength значение 0:
$element.data('typeahead').options.minLength = 0;
Параметры minLength принудительно становятся 1, когда создается тип, но вы можете установить его после создания и он отлично работает.
Использование 0.10.4
Чтобы вернуть все результаты для пустого запроса, добавьте следующее в строку 450 bloodhound.js
if (query == "") { return that.datums; }
Чтобы вызвать совпадение по фокусу, выведите событие нажатия клавиши на вашем входе при фокусировке
$(input_element).on("click", function () {
ev = $.Event("keydown")
ev.keyCode = ev.which = 40
$(this).trigger(ev)
return true
});
Существует способ сделать это сейчас, не изменяя исходный файл typeahead. Вы должны сделать две вещи: установите minlength в 0 и добавьте обработчик событий для события focus: В приведенном ниже примере, который я скопировал из первого примера на странице Twitter (https://twitter.github.io/typeahead.js/examples/) - убедитесь, что местоположение указано typeahead.js и jquery -ui.js является правильным.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="typeahead.js"></script>
<script src="jquery-ui.js"></script>
<script>
$(function(){
var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substrRegex;
// an array that will be populated with substring matches
matches = [];
// regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q, 'i');
// iterate through the pool of strings and for any string that
// contains the substring `q`, add it to the `matches` array
$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
// the typeahead jQuery plugin expects suggestions to a
// JavaScript object, refer to typeahead docs for more info
matches.push({ value: str });
}
});
cb(matches);
};
};
var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];
$('.typeahead').typeahead({
hint: true,
highlight: true,
minLength: 0
},
{
name: 'states',
displayKey: 'value',
source: substringMatcher(states)
});
$('.typeahead').on( 'focus', function() {
if($(this).val() === '') // you can also check for minLength
$(this).data().ttTypeahead.input.trigger('queryChanged', '');
});
});
</script>
</head>
<body>
<input class="typeahead" type="text" placeholder="States of USA">
</div>
</body>
</html>
Проверено, что это работает с 0.10.5. Примечание. Найдено, что это не работает с поисковой системой Bloodhound, поскольку запросTokenizer для Bloodhound ожидает символа.
В typeahead v.0.11.1 применяется исправление, упомянутое в других ответах. Вы можете добиться этого с помощью опции:
minLength: 0
Работает с клавиатурой или мышью. Никаких изменений кода или новых событий не требуется.
Другой вариант - использовать непубличные API Typeahead. Полный объект Typeahead доступен через метод jQuery data.
var _typeaheadElem = $('#myInput').find('.typeahead');
var _typeahead = _typeaheadElem.data('ttTypeahead');
_typeaheadElem.focus(function() {
/* WARNING: This is hackery abusing non-public Typeahead APIs */
if (_typeaheadElem.val() === "") {
var input = _typeahead.input; //Reference to the TA Input class
//Set the component current query to something !== input.
input.query = "Recent People";
input._onInput("");
}
});
Смотрите код, который работает в v0.10.2 http://pastebin.com/adWHFupF
Это связано с PR 719 https://github.com/twitter/typeahead.js/pull/719