JQuery UI Поведение автозаполнения. Как искать свободный текст при вводе?

Question

первый вопрос (и, надеюсь, но сомнительно мой единственный)

Я использую автозаполнение пользовательского интерфейса jQuery. Вот пример кода, чтобы повторить мою проблему.

var suggestions = ["C", "Clojure", "JavaScript", "Perl", "PHP"];

$("#autocomplete").autocomplete({
    source: suggestions
});

Когда пользователь вводит «J», ему будут предложены «Clojure» и «JavaScript» в качестве предложений.

Я исключил Java из этого списка, если пользователь хочет найти Java, он набирает «Java», нажимает клавишу ввода, но форма не отправляется. Если вы добавите пробел, предложение «JavaScript» исчезнет, ​​и форму можно отправить, нажав клавишу ввода.

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

$("#autocomplete").keypress(function(event) {
  alert(event.keyCode);
  if (event.keyCode=='13') $this.closest('form').submit();
});

Я попробовал описанное выше, подумав, что смогу вручную обнаружить нажатие клавиши отправки и отправить форму, но предупреждение показывает, что все клавиши обнаружены, кроме ЗАПИСИ, которая, по-видимому, подавляется автозаполнением.

Любая помощь очень ценится! Спасибо.

Answer 1

UPDATE

Мне пришлось внести несколько изменений, но после этого этот код отлично работает на моей стороне. Во-первых, e.keycode должен быть e.keyCode. Я не думал, что дело имело значение, но это так. Кроме того, убедитесь, что вы не цитируете 13, когда проверяете, что код клавиши является кнопкой ввода. Это не будет работать правильно, если вы это сделаете. Вот новый код:

var suggestions = ["C", "Clojure", "JavaScript", "Perl", "PHP"];
$("#autocomplete").autocomplete({
    source: suggestions
}).keypress(function(e) {
    if (e.keyCode === 13) {
        $(this).closest('form').trigger('submit');
    }
});

<Ч />

Функция нажатия клавиш должна выглядеть так, как показано ниже, а также вы можете объединить функции автозаполнения и нажатия клавиш, чтобы вам было проще. Ниже код должен работать.

var suggestions = ["C", "Clojure", "JavaScript", "Perl", "PHP"];
$("#autocomplete").autocomplete({
    source: suggestions
}).keypress(function(e) {
    if (e.keycode === 13) {
        $(this).closest('form').trigger('submit');
    }
});

Answer 2

У меня была похожая проблема, виджет автозаполнения jquery-ui запускает событие select, когда пользователь выбирает предложение из списка, независимо от того, было выбрано выбранное предложение или нажата клавиша ввода. Но это ничего не дало, если пользователь набрал текст и нажал клавишу ввода без выбора элемента из списка. Когда это произойдет, мне нужно сделать поиск.

Было легко добавить обработчик событий keypress, но он срабатывал независимо от того, был сделан выбор или нет. Поэтому я добавил переменную didSelect, чтобы сохранить состояние выбора.

Вот полное решение:

$(function() {
var didSelect = false;

$( "#search" ).autocomplete({
    source: "/my_remote_search",
    minLength: 2,
    search: function (event, ui) {
        didSelect = false;
        return true;
    },
    select: function( event, ui ) {
        if (ui.item) {
            didSelect = true;
            my_select_function(ui.item);
        }
    }
}).keypress(function(e) {
    if (e.keyCode == 13) {
        if ( ! didSelect ) {
            my_search_function( $("#search").val() );
        }
    }
});

});

Answer 3

Это то, что я сделал

<div class="ui-widget"> 
    <form action="javascript:alert('hey run some javascript code')">
        <input id="search"  />
    </form>
</div>

Answer 4

Использование плагина UI Autocomplete версии 1.8.5:

Найдите этот бит кода

"case d.ENTER: case d.NUMPAD_ENTER: a.menu.element.is (": visible") && c.preventDefault (); "

и удалите или закомментируйте его.

По существу то, что было сказано выше, но из текущей версии плагина.

ура

Пит

Answer 5

Подавления автозаполнения отправляются, но для меня это помогло:

jQuery.fn.go_url = function(id) {
    var url="gl10.pl?ar=2010&listi=ts&niv=stovnsnr&rl=1290693052914&stovnsnr=replaceme";
    var ok;
    if (ok=id.match(/^\d{6}$/)) {
        url=url.replace(/replaceme/g,id);
        location=url;
    }
}
jQuery(function() {
    jQuery( "#stovnar" ).autocomplete({
        source: "autocomplete.pl?pname=stovnsnr",
        minLength: 3,
        select: function( event, ui ) { if (ui.item) { jQuery.fn.go_url(ui.item.id); } }
    });
}).keypress(function(e) {
    if (e.keyCode === 13) {
        v=jQuery("#stovnar").val();
        jQuery.fn.go_url(v)
    }
});

Answer 6

<script>
    $(function() {
        $('#student').autocomplete({
            source: '../ajx/student_list.php',
            minLength: 3,
            response: function( event, ui ) {
                $('#student_id').val(ui.content[0].id);
            },
            select: function( event, ui ) {
                $('#student_id').val(ui.item.id);
                $(this).closest('form').trigger('submit');
            }
        }).keypress(function(e) {
            if (e.keyCode === 13) {
                $(this).closest('form').trigger('submit');
            }
        });
    });
</script>
<div>
    <form action='../app/student_view.php'>
        <input name='student_id' id='student_id' type='hidden' value=''>
        <label for='student'>Student: </label>
        <input id='student' />
    </form>
</div>

Здесь я использовал автозаполнение для поиска студента.Если пользователь нажмет ENTER, форма будет отправлена, даже если в списке ничего не было выбрано.Событие 'response' обновило бы значение скрытого поля ввода первым элементом в списке.Они также могут щелкнуть или выбрать из списка.

Answer 7

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

1. Makeполе ввода для ввода текста с именем #input и скрытый ввод с именем #hiddeninput.Ваш поисковый сервер должен будет использовать значение для #hiddeninput.

2. Внутри вашего автозаполнения установите значение #hiddeninput для request.term: (Я установил это внутри $.ajax({ success: }))

$ ("input # hiddeninput"). Val (request.term);

1. Установить автозаполнение с помощью выбора: -метод для заполнения скрытого ввода выбранным предложением:

select: function( event, ui ) {
  $("input#input").val(ui.item.label),
  $("input#hiddeninput").val(ui.item.nr),
  //Auto-submit upon selection
  $(this).closest("form").submit();
}

Теперь ваш поиск будет выполняться по тому, что пользователь набрал, пока он не выберет что-то изсписок предложений.