Автозаполнение пользовательского интерфейса JQuery - как сделать ввод недоступным для редактирования пользователем - PullRequest
1 голос
/ 02 марта 2012

У меня есть поле ввода. При щелчке по полю ввода отображаются все элементы из источника автозаполнения. Когда пользователь выбирает один элемент, поле ввода заполняется правильно. Все отлично работает ... Тем не менее, я пытаюсь получить что-то большее, и мне не удается понять, как это сделать. Я хотел бы, чтобы это первое поле ввода не было редактируемым пользователем. В настоящее время он может ввести значение вручную. Если я добавлю readonly в свой css, ввод больше не будет кликабельным .... Так что я не вижу, как это сделать. Да, кстати, не хочу использовать поле со списком. Вход должен оставаться входом. Заранее большое спасибо за ответы. Приветствия. Марк.

http://jsfiddle.net/DeJQB/2/

Мой HTML:

<input type="text" id="my-input" />

Мой JS:

$(function() {
    var availableTags = [
            "00","15","30","45"
        ];
    $("#my-input").autocomplete({
        source: availableTags,
        minLength: 0
    }).click(function() {
        $(this).val("");
        $(this).autocomplete("search");
    });
});​

1012 *

Ответы [ 3 ]

6 голосов
/ 02 марта 2012

Вы пытались добавить атрибут HTML readonly, в отличие от CSS? У меня отлично работает следующее:

<input type="text" id="my-input" readonly="readonly" />
0 голосов
/ 20 января 2016

лучшее решение

`

var autocompleteIsSelect = false;

$("#txtAdjustmentAcc").autocomplete({
                source: function (request, response) {
                    $.ajax({
                        url: requestpath + '/Pages/Purchase/PEntrySupTrans.aspx/GetAdjAccount',
                        data: "{ 'prefix': '" + request.term.toString().toUpperCase() + "'}",
                        dataType: "json",
                        type: "POST",
                        contentType: "application/json; charset=utf-8",
                        success: function (data) {
                            response($.map(data.d, function (item) {
                                return {
                                    label: item,
                                    val: item.split('          ')[0]
                                }
                            }))
                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                        failure: function (response) {
                            alert(response.responseText);
                        }
                    });
                },
                select: function (e, i) {
                    autocompleteIsSelect = true;
                    $("#txtAdjustmentAcc").val(i.item.label);
                    console.log('Select-' + autocompleteIsSelect);
                },
                close: function (event, ui) {
                    console.log('Close-' + autocompleteIsSelect);
                    if (!autocompleteIsSelect) { autocompleteIsSelect = false; $(this).val(''); }


     },
        minLength: 1
    }).blur(function () {
        console.log('Blur-' + autocompleteIsSelect);
        if (!autocompleteIsSelect) { $(this).val(''); }
        autocompleteIsSelect = false;
    });`
0 голосов
/ 02 марта 2012

Игнорировать нажатие клавиши?

$("#my-input").autocomplete({
    source: availableTags,
    minLength: 0
}).click(function() {
    $(this).val("");
    $(this).autocomplete("search");
}).keypress(function(event) {
    event.preventDefault();
});

Демо здесь -> http://jsfiddle.net/DeJQB/3/

...