我如何在 jqGrid 中使用本地数组显示自动完成的效果？

Question

我基于这个 example

出现自动完成和效果但有 url: ' http://trirand.com/blog/phpjqgrid/examples/jsonp/autocompletep.php?callback=?&acelem=ShipName '

在下面的代码中，我将自动完成功能添加到“客户端”功能列，如示例中所示，这有效。

<!DOCTYPE html>

<html lang="en">
<head>
    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script type="text/ecmascript" src="../../../js/jquery.min.js"></script> 
    <!-- This is the Javascript file of jqGrid -->   
    <script type="text/ecmascript" src="../../../js/trirand/jquery.jqGrid.min.js"></script>
    <!-- This is the localization file of the grid controlling messages, labels, etc.
    <!-- We support more than 40 localizations -->
    <script type="text/ecmascript" src="../../../js/trirand/i18n/grid.locale-es.js"></script>
    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
    <link rel="stylesheet" type="text/css" media="screen" href="../../../css/jquery-ui.css" />
     <script type="text/ecmascript" src="../../../js/jquery-ui.min.js"></script>  
    <!-- The link to the CSS that the grid needs -->
    <link rel="stylesheet" type="text/css" media="screen" href="../../../css/trirand/ui.jqgrid.css" />

    <meta charset="utf-8" />
    <title></title>
</head>
<body>

    <style type="text/css">

        /* set the size of the datepicker search control for Order Date*/
        #ui-datepicker-div { font-size:11px; }

        /* set the size of the autocomplete search control*/
        .ui-menu-item {
            font-size: 11px;
        }

         .ui-autocomplete {
            font-size: 11px;
        }       

    </style>

    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>



    <script type="text/javascript"> 


        var mydata = [

               { id: "1", invdate: "2007-10-01", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },

               { id: "2", invdate: "2007-10-02", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },

               { id: "3", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },

               { id: "4", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },

               { id: "5", invdate: "2007-10-05", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },

               { id: "6", invdate: "2007-09-06", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" },

               { id: "7", invdate: "2007-10-04", name: "test", note: "note", amount: "200.00", tax: "10.00", total: "210.00" },

               { id: "8", invdate: "2007-10-03", name: "test2", note: "note2", amount: "300.00", tax: "20.00", total: "320.00" },

               { id: "9", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", total: "430.00" }

        ];


        $(document).ready(function () {

            $("#jqGrid").jqGrid({

                datatype: "local",

                    data: mydata,


                colModel: [

                    { label: 'Inv No', name: 'id', width: 75, key:true },

                    { label: 'Date', name: 'invdate', width: 90 },

                    { label: 'Client', name: 'name', width: 100,
                            searchoptions: {
                            // dataInit is the client-side event that fires upon initializing the toolbar search field for a column
                            // use it to place a third party control to customize the toolbar
                            dataInit: function (element) {
                                $(element).autocomplete({
                                    id: 'AutoComplete',
                                    source: function(request, response){
                                        this.xhr = $.ajax({
                                            url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/autocompletep.php?callback=?&acelem=ShipName',
                                            data: request,
                                            dataType: "jsonp",
                                            success: function( data ) {
                                                response( data );
                                            },
                                            error: function(model, response, options) {
                                                response([]);
                                            }
                                        });
                                    },
                                    autoFocus: true
                                });
                            },
                            sopt : ['cn']
                        }
                         },

                    { label: 'Amount', name: 'amount', width: 80 },

                    { label: 'Tax', name: 'tax', width: 80 },

                    { label: 'Total', name: 'total', width: 80 },

                    { label: 'Notes', name: 'note', width: 150}

                ],            

                height: 250,

                    width: 780,


                     caption: "Datos en tiempo real", //titulo del grid


                     rowNum: 20, //Registros por página
                     rownumbers: true, // Mostrar un número a la izquierda por registro



                viewrecords: true, // Cantidad de registros
                page: 1,            //Página inicial de la paginación
                pager: "#jqGridPager"



            });         
            $("#jqGrid").jqGrid('bindKeys'); // Desplazar por teclas 


            $('#jqGrid').jqGrid('filterToolbar');
               $('#jqGrid').jqGrid('navGrid',"#jqGridPager", {                
                search: false, // show search button on the toolbar
                add: false,
                edit: false,
                del: false,
                refresh: true
            });

        });

    </script>







</body>

</html>

如果我使用数组（我想使用本地数组，没有外部数据）：

dataInit: function (element) {
                                $(element).autocomplete({
                                    id: 'AutoComplete',
                                    source: mydata,
                                    autoFocus: true
                                });
                            },

结果没有工作=(（基于this）

我需要像第一个图像一样工作但使用数组（本地数据）？

Answer 1

Jquery 自动完成小部件可以处理简单字符串值数组或具有属性 label、value 的对象，您尝试向他提供对象数组。您可以通过为每一列更改一个字符串来解决它：

dataInit: function (element) {
    var src = $.map(mydata, function (el) {
        return el.name;  // the most important string
    });

    $(element).autocomplete({
        source: src,
        autoFocus: true
    });
},

我如何在 jqGrid 中使用本地数组显示自动完成的效果？

How I can show the effect of autocomplete with a local array in jqGrid?

ajax

jquery

json

jqgrid