jQGrid + jQueryUI Autocomplete + поле со списком автоматически открывается в фокусе

Я уверен, что мне не хватает чего-то очень простого в этом. После биения головой о стол (буквально) уже пару дней, я сдаюсь на милость стека:

Я использую jQuery UI Autocomplete в качестве поля со списком в моем jQGrid (я знаю! Я уже искал решение в другом месте, но безрезультатно!). Я хотел бы, чтобы раскрывающийся список открывался при доступе к ячейке для редактирования через событие onSelectRow в jqGrid. В принципе, я хочу сделать именно то, что обсуждается здесь:

Открыть поле со списком пользовательского интерфейса jQuery в фокусе

и демо здесь:

http://jsfiddle.net/gEuTV/

Единственная разница в том, что мне это нужно в jqGrid. Я пробовал приведенный ниже код, который (ошибочно) вызывал появление поля со списком, когда строка была сфокусирована, но поле со списком не появляется в фокусе строки в событии onSelect. У меня есть подозрение, что я просто помещаю следующий код не в то место, но я пробовал его везде, где только мог:

$("#"+id+"_usr_validation","#list2").bind("focus", function () {
this.value = '';
$(this).autocomplete("search", ''); 

Вот мой полный код, включая сетку:

$(function(){
    var lastsel;
     $("#list2").jqGrid({
            url: 'php_includes/uploadgrid.php',
            datatype: "json",
            mtype: 'GET',
            colNames:[
                    'User Value',
                    'Translated Value',
                    'User Validation,
                    ],
            colModel:[
                    {name:'usr_value',index:'usr_value', sortable:'true', width:60, align:"center", editable:false},
                    {name:'translated_value',index:'translated_value', sortable:'true', width:60, align:"center", editable:false},
                    {name:'usr_validation',index:'usr_validation', sortable:'true', width:60, align:"center", editable:true}
                    ],
            pager: '#pager2',
            rowNum: 1000,
            scroll: true,
            gridview: true,
            viewrecords: false,
            height: 'auto',
            hidegrid: false,
            autowidth: true,
            pgbuttons: false,
            pginput: false,
            forceFit: true,
            emptyrecords: "No record was loaded",
            onSelectRow: function(id){
                            if(id && id==lastsel){
                                    $("#list2").jqGrid('editRow',id,true,autocomp,'','','',selectNone);
                                    } else {
                            if(id && id!==lastsel){
                                    $("#list2").jqGrid('saveRow',lastsel);
                                    $("#list2").jqGrid('editRow',id,true,autocomp,'','','',selectNone);
                                    lastsel=id;
                                    }
                                }
                            },
            editurl: '/php_includes/jqGridCrud.php',
            });
            jQuery("#list2").jqGrid('navGrid',"#pager2",{edit:false, search:false, del:false, add:false})

         function selectNone(){
                     $("#list2").jqGrid('resetSelection');
                    }
                    //this function de-selects all previously accessed rows

            function autocomp(id) {
                    var term2 = $("#list2").jqGrid('getCell',id,'usr_value');
                    $("#"+id+"_usr_validation","#list2")
                            .autocomplete({
                                    source: function(request, response) {
                                              $.ajax({
                                                    url: "/php_includes/Autocomplete.php",
                                                    dataType: "json",
                                                    data: {
                                                            term : request.term,
                                                            term2 : term2,
                                                            },
                                                    success: function(data) {
                                                            response(data);
                                                            }
                                                    });
                                            },
                                    minLength: 0,
                                    select: function(event, ui) {
                                            $("#list2").val(ui.item.id);
                                            },

                            });
             $("#"+id+"_usr_validation","#list2").bind("focus", function () {
                    this.value = '';
                    $(this).autocomplete("search", '');
              });

            }
    });

person Josh    schedule 13.11.2011    source источник


Ответы (1)


Вы должны изменить 'User Validation, на 'User Validation' и удалить конечные запятые в разных местах вашего кода (например, из editurl: '/php_includes/jqGridCrud.php',} и закрыть, которые являются синтаксическими ошибками в JavaScript, но игнорируются во многих, но не во всех веб-браузерах).

ОБНОВЛЕНО: Еще одна проблема заключается в том, что фокус на поле редактирования будет установлен до oneditfunc, поэтому событие "фокус" не может быть вызвано. В качестве обходного пути вы можете инициировать событие «фокус» сразу после события .bind("focus", ....

См. измененную демонстрацию здесь.

person Oleg    schedule 13.11.2011
comment
Олег- Во-первых, большое спасибо за оперативный ответ. Во-вторых, для меня большая честь получить от вас ответ на мой вопрос после того, как я прочитал так много ваших ответов в прошлом. Спасибо за советы по форматированию - очень помогли. Что касается вашего ответа, единственная проблема, которую я вижу, заключается в том, что после того, как я выбираю элемент в раскрывающемся списке, список просто открывается снова, что не позволяет мне фактически что-либо выбрать. Я попробовал это на своем сервере разработки (у которого есть функция saveRow, которую вы закомментировали) - с тем же результатом. Какие-либо предложения? - person Josh; 14.11.2011
comment
Одно изменение комментария выше: код Олега отлично работает, если пользователь использует клавиатуру для выбора раскрывающегося списка (например, с помощью стрелок вниз) и нажимает клавишу ввода. Это просто не работает, если пользователь использует мышь для выбора элемента. - person Josh; 14.11.2011
comment
@Josh: я ответил только на ваш прямой вопрос о проблеме «фокуса» и не исследовал ваш код автозаполнения. У тебя были другие проблемы. Демо должно корректно работать с автозаполнением и моими тестовыми данными. - person Oleg; 14.11.2011
comment
Спасибо Олег. Вы прекрасно ответили на мой вопрос. По какой-то причине, когда я выбираю элемент из раскрывающегося списка (в вашей демонстрации), он просто повторно открывает поле со списком. Я предполагаю, что это просто что-то не так на моей стороне, хотя. Еще раз спасибо. - person Josh; 14.11.2011
comment
@Josh: Добро пожаловать! В каком веб-браузере у вас возникла проблема? Использовали ли вы первый из последнее демо? - person Oleg; 14.11.2011
comment
После дальнейшего размышления и обзора я думаю, что поведение, к которому я стремлюсь, лучше связано с событием click(), чем с событием focus(), чтобы пользователь мог щелкнуть строку, раскрывающийся список появляется автоматически, выберите элемент из список, то раскрывающийся список исчезает, а выбранный элемент остается в ячейке. Соответственно, с огромной помощью вашего кода, я изменил ваш код, чтобы просто использовать событие щелчка в следующем разделе: - person Josh; 15.11.2011
comment
$(#+id+_usr_validation,#list2).click(function() { this.value = ''; $(this).autocomplete(search, ''); }) .click(); } - person Josh; 15.11.2011
comment
Между прочим, такое поведение было связано не с браузером, а с тем, что начинающий кодер не смог понять свой вопрос и предоставленные ответы :). Еще раз спасибо. - person Josh; 15.11.2011
comment
@Josh: Добро пожаловать! Я не понимаю только необходимости очищать значение (this.value = ''; или $(this).val('');), которое вы делаете. Если строка будет сохранена (пользователь нажмет Enter), старое значение в сетке будет удалено и сброшено с пустой строкой. Это действительно то, что вам нужно? Я думаю, что достаточно просто использовать $(this).autocomplete("search", '');. Исходное значение по-прежнему будет в поле ввода, но будет отображаться полное контекстное меню (независимо от значения из поля ввода). - person Oleg; 15.11.2011
comment
ты прав. Мне это не нужно.value = ''; и мне не нужно было $(this).val(''). Теперь работает отлично. Спасибо! - person Josh; 16.11.2011