This topic contains 1 reply, has 2 voices, and was last updated by  Dimitar 4 years, 10 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Multiple search does not work #73991

    RazorNet
    Participant

    Hello!

    I am trying to adapt the code of jqxInput “autocomplete” with json data (from databases).

    The problem is the multiple search. When I insert the second input in the search I get only the comma, but not looking.

    Better … I see that there is a ‘sending GET’ but do not see the result in the INPUT. Why?

    This is the code:

    <div id='content'>
            <script type="text/javascript">
    
                $(document).ready(function () {
    
                    $("#input").jqxInput({
                        placeHolder: "Enter a City", height: 25, width: 200,
                        source: function (query, response) {
                            /////
                            var item = query.split(/,\s*/).pop();
                            // update the search query.
                            $("#input").jqxInput({
                                query: item
                            });
                            /////
                            var dataAdapter = new $.jqx.dataAdapter
                            (
                                {
                                    datatype: "json",
                                    datafields:
                                    [
                                        { name: 'Campo', type: 'string' },
                                    ],
                                    url: "b3",
                                    data:
                                    {
                                        featureClass: "P",
                                        style: "full",
                                        maxRows: 12
                                    }
                                },
                                {
                                    autoBind: true,
                                    formatData: function (data) {
                                        data.name_startsWith = query;
                                        return data;
                                    },
                                    loadComplete: function (data) {
                                        if (data.length > 0) {
                                            response($.map(data, function (item) {
                                                return {
                                                    label: item.Campo,
                                                    value: item.Campo
                                                }
                                            }));
                                        }
                                    }
                                }
                            );
                        },
                        ////////////////
                        
                        renderer: function (itemValue, inputValue) {
                            var terms = inputValue.split(/,\s*/);
                            // remove the current input
                            terms.pop();
                            // add the selected item
                            terms.push(itemValue);
                            // add placeholder to get the comma-and-space at the end
                            terms.push("");
                            var value = terms.join(", ");
                            return value;
                        }
    
                        ///////////////
    
                    });
                });
            </script>
            <input type="text" id="input" />
        </div>
    Multiple search does not work #74042

    Dimitar
    Participant

    Hello RazorNet,

    We tested your example, but with local JSON data, and it works fine (screenshot):

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxinput.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var data = [{ Campo: 'USA' }, { Campo: 'Spain' }, { Campo: 'Bulgaria' }, { Campo: 'Brazil'}];
    
                $("#input").jqxInput({
                    placeHolder: "Enter a City", height: 25, width: 200,
                    source: function (query, response) {
                        /////
                        var item = query.split(/,\s*/).pop();
                        // update the search query.
                        $("#input").jqxInput({
                            query: item
                        });
                        /////
                        var dataAdapter = new $.jqx.dataAdapter
                            (
                                {
                                    datatype: "json",
                                    datafields:
                                    [
                                        { name: 'Campo', type: 'string' },
                                    ],
                                    //                                url: "b3",
                                    //                                data:
                                    //                                {
                                    //                                    featureClass: "P",
                                    //                                    style: "full",
                                    //                                    maxRows: 12
                                    //                                }
                                    localdata: data
                                },
                                {
                                    autoBind: true,
                                    formatData: function (data) {
                                        data.name_startsWith = query;
                                        return data;
                                    },
                                    loadComplete: function (data) {
                                        if (data.length > 0) {
                                            response($.map(data, function (item) {
                                                return {
                                                    label: item.Campo,
                                                    value: item.Campo
                                                }
                                            }));
                                        }
                                    }
                                }
                            );
                    },
                    ////////////////
    
                    renderer: function (itemValue, inputValue) {
                        var terms = inputValue.split(/,\s*/);
                        // remove the current input
                        terms.pop();
                        // add the selected item
                        terms.push(itemValue);
                        // add placeholder to get the comma-and-space at the end
                        terms.push("");
                        var value = terms.join(", ");
                        return value;
                    }
    
                    ///////////////
    
                });
            });
        </script>
    </head>
    <body class='default'>
        <input type="text" id="input" />
    </body>
    </html>

    Maybe the issue originates on your server-side (‘b3’).

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.