jQuery UI Widgets › Forums › Editors › Input, Password Input, TextArea, ColorPicker, Rating, TagCloud, Loader › Multiple search does not work
Tagged: Angular input, AutoComplete, database, jQuery Input, jqxinput, json, multiple, query
This topic contains 1 reply, has 2 voices, and was last updated by Dimitar 9 years, 6 months ago.
-
Author
-
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>
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,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.