автозаполнение jQuery UI отключить события выбора и закрытия
Я использую автозаполнение jQuery UI немного иначе, чем это, вероятно, было создано.
в основном я хочу сохранить все те же функции, единственная разница заключается в том, что когда появляется поле предложения, я не окно предложения, чтобы скрыть, когда пользователь делает выбор, и я также не хочу, чтобы этот выбор заполнял поле ввода, которое .автозаполнение прилагается.
Итак, я читал документацию jQuery UI, и, похоже, есть способ отключить Select: and Close: events, но я нахожу способ, которым они объяснили это, очень запутанным, и, следовательно, именно поэтому я здесь прошу о помощи.
мой jQuery
$( "#comment" ).autocomplete({
source: "comments.php",
minLength: 4,
// Attempt to remove click/select functionality - may be a better way to do this
select: function( event, ui ) {
return false;
},
// Attempt to add custom Class to the open Suggestion box - may be a better way
open : function (event, ui) {
$(this).addClass("suggestion-box");
},
// Attempt to cancel the Close event, so when someone makes a selection, the box does not close
close : function (event, ui) {
return false;
}
});
официальная документация jQuery UI
срабатывает, когда элемент выбран из меню; ui.товар относится к выбранному элементу. Действие по умолчанию select заключается в замене значения текстового поля значением выбранный пункт. Отмена этого события предотвращает обновление значения, но не делает его запретить закрытие меню.
примеры кода
Supply a callback function to handle the select event as an init option.
$( ".selector" ).autocomplete({
select: function(event, ui) { ... }
});
Bind to the select event by type: autocompleteselect.
$( ".selector" ).bind( "autocompleteselect", function(event, ui) {
...
});
путаница
что меня смущает, так это то, что они, похоже, предлагают удалить .автозаполнение и замена .bind ("autocompleteselect") - который полностью отключит автозаполнение?
большое спасибо за любую помощь вы можете дать.
5 ответов
второй синтаксис с использованием .bind()
- это просто еще один способ присоединения обработчика событий к пользовательским событиям jQueryUI. Это точно так же, как определение обработчика событий внутри параметров виджета (используя select: function(event, ui) { }
)
представьте, если бы у вас было несколько виджетов автозаполнения на странице, и вы хотели бы выполнить ту же функцию, когда любой из них вызвал событие "select", например:
$(".autocomplete").bind("autocompleteselect", function(event, ui) {
/* Will occur when any element with an autocomplete widget fires the
* autocomplete select event.
*/
});
Что касается отмены select
событие, у вас есть что исправить. Однако, отмена close
событие немного сложнее; похоже, что возврат false из обработчика событий не будет работать (close
уволен после меню закрывается). Вы можете выполнить немного hackery и просто заменить
черпая вдохновение из решения Эндрюса, я нашел способ сохранить автозаполнение открытым при выборе с меньшим влиянием на основные функции:
var selected; //flag indicating a selection has taken place
var $input = $("input").autocomplete({
source: ['Hello', 'Goodbye', 'Foo', 'Bar'],
select: function( event, ui ) {
selected = true;
}
});
//Override close method - see link below for details
(function(){
var originalCloseMethod = $input.data("autocomplete").close;
$input.data("autocomplete").close = function(event) {
if (!selected){
//close requested by someone else, let it pass
originalCloseMethod.apply( this, arguments );
}
selected = false;
};
})();
таким образом, идея состоит в том, чтобы нейтрализовать метод закрытия, когда это необходимо, как указано выбранным флагом. Выбрав флаг в глобальном пространстве имен, вероятно, не лучшая идея, но это для кого-то другого, чтобы улучшить: -).
Я пошел немного другим путем для этого и расширяется по скрипка
цель состоит в том, что я всегда хотел, чтобы автозаполнение отображалось, пока определенный вход имел фокус-с учетом множественного выбора.
$("#myInput").autocomplete({
source: ["Test", "This", "Doesnt", "Close"],
minLength: 0,
select: function (event, ui) {
// Add your own custom login to manipulate ui.item.label and add what you need the input field (and ui.item.value if required.)
// We've customised how we want the select to "work" so prevent the default
// of auto clearing the input.
event.preventDefault();
},
close : function(event)
{
// We're closing the autocomplete - check if the input still has focus...
if ($("#myInput").is(":focus"))
{
// Prevent the auto complete from closing.
event.preventDefault();
// Make sure we're reshowing the autcomplete - since the input would have momentarily
// lost focus when we selected an item.
$("#myInput").autocomplete("search", "")
}
}
});
$("#myInput").focus(function () {
// We're not taking any filtering into account for this example.
$(this).autocomplete("search", "")
});
Я пробовал различные идеи, которые другие представили здесь без успеха.
Я использую Jquery 2.1.4 с UI 1.11.4, и вот как я получил это для работы:
Javascript:
<script>
var lookup_selectable = false;
var lookup_term = '';
$(function() {
$( "#lookup" ).autocomplete({
source: "lookup_processor.php",
minLength: 3,
renderItem: function( ul, item ) {
// This function is called for each item returned from the 'source:'
// It is up to you to ensure that a list item element is returned.
// do whatever logic on the item data to determine if it should not be slectable..
//Example:
// The backend "source" has handled the logic of what is selectable or not
// and has set a 'selectable' parameter that we can use
if(item.selectable){
// return the item unchanged from autocompletes default behavior
return $("<li></li>").data("item.autocomplete", item).append("<a>" + item.label + "</a>").appendTo(ul);
}else{
// this item is not selectable so lets apply a class named 'item-disabled' to give a visual queue.
// We are also wrapping the label in a span instead of an anchor just to show that the item is still clickable, darn!
return $('<li class="ui-menu-item item-disabled"></li>').data("item.autocomplete", item).append('<span>'+item.label+'</span>').appendTo(ul);
}
},
select: function( event, ui ) {
// This item was clicked ..
// save the item.clickable value to our own external variable
// Note: We have to do this because the item object is not available in the 'close' function :-(
lookup_selectable = ui.item.selectable; // the item object is available inside the ui parameter
// store the current search term
lookup_term = $('#lookup').val();
// do any additional stuff based on the item selected, if needed...
},
close: function(event, ui){
// This function fires after select: and after autocomplete has already "closed" everything. This is why event.preventDefault() won't work.
// ** ui is an empty object here so we have to use our own variable to check if the selected item is "selectable" or not..
if (! lookup_selectable){
// We need to undo what autocomplete has already done..
$('#lookup').val(lookup_term); // Restore the search term value
$('#'+event.currentTarget.id).show(); // Keep the selection window open
// ta-da! To the end user, nothing changes when clicking on an item that was not selectable.
}
}
});
});
</script>
CSS:
<style>
li.ui-menu-item.item-disabled {
text-decoration: none;
line-height: 1.5;
color: #ccc;
}
</style>
Backend Source " lookup_processor.в PHP":
<?php
$search_results = array();
// ..do whatever to get the data for each item
$item_data = getting_item_data();
foreach ($item_data as $data){
// The id, label, and value keys are the typical keys that autocomplete expects, but you can add ass many others as you want..
// For our example we are setting the 'selectable' key to true or false based on some simple example logic
$search_results[] = array(
'id'=>$data['id'],
'label'=>$data['label'],
'value'=>$data['value'],
'selectable'=>$data['some_thing_to_check']>0?true:false, // This is the parameter our 'select:' function is looking for
'send_it_all_if_you_want'=>json_encode($data)); // this is just an example of how you can send back anything you want
);
}
// send the results back to autocomplete
echo json_encode($search_results);
exit;
?>
переход с $ input.данные ("автозаполнение").меню.опции.выбранная функция(){} вызванное значение не удерживается после выбора другого элемента (наша реализация должна быть добавлена до конца. Возможно, нужно просто добавить e.preventDefault () или возвращает false перед добавлением кода). Так что я просто сделал подмену в случае закрытия. пример с установкой внешней переменной и написанием собственного метода лучше, но и не понравилось. Сначала я вызываю метод вручную с передачей параметра, когда нужно закройте autocomplte вручную. (в нашей реализации клиент требовал, чтобы список открывался при нажатии на элементы, но закрывался, когда мышь покидает контейнер textbox.
поэтому я просто прикрепил автозаполнение к контейнеру элементов textbox и прикрепил mouseenter и mouseleave. Чтобы определить, должен ли он закрываться, я использовал jQuery(this).данные ("canClose") пользовательская переменная. В принципе, то, что он делает, просто открывает автозаполнение с помощью метода поиска, когда переменная "ложь".
вот окончательный код:
element.autocomplete({
minLength:0,
source: source,
appendTo: element.parent(),
close: function () {
if (!jQuery(this).data("canClose")) {
jQuery(this).autocomplete('search', '');
}
return false;
}
});
element.mouseenter(function () {
element.data("canClose", false);
jQuery(this).autocomplete('search', '');
});
element.parent().mouseleave(function () {
element.data("canClose", true);
element.delay(2000).autocomplete("close");
});
Если вам нужно сделать добавление вместо замены значения, добавьте обработчик select в конструктор:
select: function (event, ui) {
var text = element.text().trim();
if (text.length > 0 && !text.endsWith(",")) {
text += ", ";
}
jQuery(this).text((text + ui.item.label));
jQuery(this).focus();
return false;
}