A lot of information on auto complete

Asked

Viewed 69 times

0

It is possible to insert a large amount of information into an auto complete and indent this information as image?

inserir a descrição da imagem aqui

plugin self-cmplete

  • You want to load this autocomplete via ajax?

1 answer

0

Take a look at this guy: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxcombobox/remotesearch.htm?web

I recommend that you evaluate the server layer as well. This may not take long to return the data, otherwise the idea of autocomplete falls apart. 

 $(document).ready(function () {
            // prepare the data
            var source =
            {
                datatype: "jsonp",
                datafields: [
                    { name: 'countryName' },
                    { name: 'name' },
                    { name: 'population', type: 'float' },
                    { name: 'continentCode' },
                    { name: 'adminName1' }
                ],
                url: "http://api.geonames.org/searchJSON",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    username: "jqwidgets"
                }
            };

            var dataAdapter = new $.jqx.dataAdapter(source,
                {
                    formatData: function (data) {
                        if ($("#jqxcombobox").jqxComboBox('searchString') != undefined) {
                            data.name_startsWith = $("#jqxcombobox").jqxComboBox('searchString');
                            return data;
                        }
                    }
                }
            );

            $("#jqxcombobox").jqxComboBox(
            {
                width: 250,
                height: 25,
                source: dataAdapter,
                remoteAutoComplete: true,
                autoDropDownHeight: true,               
                selectedIndex: 0,
                displayMember: "name",
                valueMember: "countryName",
                renderer: function (index, label, value) {
                    var item = dataAdapter.records[index];
                    if (item != null) {
                        var label = item.name + "(" + item.countryName + ", " + item.adminName1 + ")";
                        return label;
                    }
                    return "";
                },
                renderSelectedItem: function(index, item)
                {
                    var item = dataAdapter.records[index];
                    if (item != null) {
                        var label = item.name;
                        return label;
                    }
                    return "";   
                },
                search: function (searchString) {
                    dataAdapter.dataBind();
                }
            });
        });
<link rel="stylesheet" href="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script> 
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcombobox.js"></script>
    <script type="text/javascript" src="http://www.jqwidgets.com/jquery-widgets-demo/scripts/demos.js"></script>

<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <span>Search for a City:</span>
        <div style="margin-top: 7px; margin-bottom: 5px;" id="jqxcombobox"></div>
        <span>ex: be</span>
    </div>
</body>

  • Thank you Emir! I will evaluate, thanks!

Browser other questions tagged plugin self-cmplete

You are not signed in. Login or sign up in order to post.