Question

我的基础是example

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

Autocomplete works

在下面的代码中，我添加到“Client”函数autocomplete，如示例中的列，这是有效的。 Autocomplete works

<!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）

enter image description here 我需要像第一张图片一样工作但使用数组（本地数据）？

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中显示自动完成与本地数组的效果？

1 个答案: