jquery-ui - Jqgrid 中的自动完成从服务器返回数据但不知道放入视图

Question

这是我的第一篇文章。stackoverflow 是开发人员的好去处。这是我的问题。我正在尝试在 JqGrid 编辑表单中使用自动完成功能。我使用 ajax 调用成功地从服务器检索数据，但不知道如何在视图中显示它。下面是我的代码。

前端代码：

 colModel :[   
                  {name:'prf_articlename', index:'prf_articlename', width:90, editable:true, edittype:'text', 
                      editoptions: { 
                         dataInit:function(e){
                            $(e).autocomplete({ 
                                source: function(request, response,term) {  
                                    var param = request.term; 
                                        $.ajax({  
                                            url: '/Myelclass/AutoCompleteServlet.do?term='+param+"&action="+"artname",  
                                            success: function (data) {  
                                            response($.map(data, function(item) {  
                                                return {   
                                                    label: item.label,  
                                                };  
                                            }));//END Success  
                                         },  
                                        });//END AJAX
                                }, 
                                minLength: 2,
                            });//END AUOTOCOMPLETE
                            }//END Dataint
                         }//END Dataint
                    },

后端代码：

String term = request.getParameter("term");
List<AutoComplete> articlelist =  prfbo.getArticleNameinEditGrid(term);
System.out.println("List Value " +articlelist.size());
JSONArray jsonOrdertanArray = JSONArray.fromObject(articlelist);
System.out.println(jsonOrdertanArray);
out.println(jsonOrdertanArray);

有人帮忙吗？？？

Answer 1

这是我个人在项目中使用的：

内部 colModel：

dataInit: function (elem) { NameSearch(elem) }},

功能：

function NameSearch(elem) {    
    $(elem).autocomplete({ source: '/Controller/NameSearch',
        minLength: 2, autosearch: true,
        select: function (event, ui) {
            $(elem).val(ui.item.value);
            $(elem).focus().trigger({ type: 'keypress', charCode: 13 });
        }
    })//$(elem).autocomplete
    $(elem).keypress(function (e) {
        if (!e) e = window.event;
        if (e.keyCode == '13') {
             setTimeout(function () { $(elem).autocomplete('close'); }, 500);
            return false;
        }
    })//$(elem).keypress(function (e){    
} //function NameSearch(elem) {

在上述功能中，我也在处理 Enter 按键。

Answer 2

这是我在 jqgrid 编辑表单中的自动完成的完整代码..

colModel :[   
 {name:'name', index:'name', width:90,  align:'center', editable:true, hidden: false, edittype:'text',
    editoptions:{
        dataInit:function (elem) { 
            $(elem).autocomplete({
                minLength: 2,
                source: function(request, response,term) {
                    var param = request.term; //values we enter to filter autocomplete
                    $.ajax({
                        url: "myurl",
                        dataType: "json",
                        type:"GET",
                        success: function (data) {
                             response($.map(data, function(item) {
                                 return { 
                                 //can add number of attributes here 
                                     id: item.id,
                                     shform: item.shortform, 
                                     value: item.name, 
                                     clr : item.color, //here apart from name and id i am adding other values too
                                     size: item.size,
                                     remar:item.remarks,
                                     subs: item.subs,
                                     selec:item.selec ,
                                     };
                                 }));//END Response

                        },//END Success
                    });//END AJAX
                },
                select: function( event, ui ) {
                    // setting values to textbox in jqgrid edit form based on selected values                               
                     $('#textbox1').val(ui.item.id);
                     $('#textbox2').val(ui.item.shform);
                     $('#textbox3').val(ui.item.clr);
                     $('#textbox4').val(ui.item.size);
                     $('#textbox5').val(ui.item.sizeremar);
                     $('#textbox6').val(ui.item.subs);
                     $('#textbox7').val(ui.item.selec);
                     $('#textbox8').val(ui.item.selp);

                } 
            });
            $('.ui-autocomplete').css('zIndex',1000); // if autocomplete has misalignment so we are manually setting it 
        }
    }, editrules :{required : true},
    formoptions:{rowpos: 1, colpos: 2} 
 },
 ........
 ]

服务器代码：

String term = request.getParameter("term");
List<ArticleDetails> articlelist =  prfbo.getPrfArticleName(term); //DB call via BO and DAO class
System.out.println("List Value " +articlelist.size());
JSONArray jsonOrdertanArray = JSONArray.fromObject(articlelist);
System.out.println(jsonOrdertanArray);
out.println(jsonOrdertanArray);

希望有人觉得它有用。