jQuery UI Widgets › Forums › Getting Started › jqxinput autopopulate
This topic contains 4 replies, has 3 voices, and was last updated by richa_k 8 years, 6 months ago.
-
Authorjqxinput autopopulate Posts
-
Hi, I have a question regards “jqxInput”.
I have auto populate Description and also based on selected item, there will code which will auto fill on another field. Its works fine and now I want to insert a input which not in populated/dropdown list. But the problem is, when I type something, whenever the keyword match the list rollout and hold the first populated item and it will fixed even I typed something different phrases. Here is the code.
/*Autocomplete Function for Description*/
$(“#complaintName”).jqxInput({
width: ‘98%’,
theme: “”,
height: 30,
placeHolder: “Enter Description”,
source: function(query, response) {
var version = <?php echo Configure::read(‘General.ICDVersion’); ?>;
var description = $(‘#complaintName’).val();
if(description.length>2){
$.when(
$.ajax({
url: ‘<?php echo Router::url(array(‘controller’=> ‘icdSearch’, ”)); ?>’,
data: {
description : description,
version : version
},
type: ‘POST’,
beforeSend: function() {
$.mobile.loading(‘show’);
},
})
).done(function(dataCostCenter){
$.mobile.loading(‘hide’);
var dataCostCenterValue = jQuery.parseJSON(dataCostCenter);
dataStore = new Array();
if(dataCostCenterValue){
for(var i = 0; i < dataCostCenterValue.length; i++){
var row = {};
row[‘code’] = dataCostCenterValue[i].code;
row[‘description’] = dataCostCenterValue[i].description;
dataStore[i] = row;
}
}var dataAdapter = new $.jqx.dataAdapter({
datatype: “json”,
datafields:
[
{name: ‘code’},
{name: ‘description’}
],
localdata: dataStore
},
{
autoBind: true,
formatData: function(data) {
data.code_startsWith = query;
return data;
},
loadComplete: function(data) {
if (data.length > 0) {
response($.map(data, function(item) {
return {
label: item.description,
value: item.code + ‘ ^^_^^ ‘ + item.description
}
}));
}
}
});
});
}}
});$(‘#complaintName’).on(‘select’, function(event) {
if (event.args) {
var item = event.args.item;
if (item) {
var value = item.value;
var detail = value.split(‘ ^^_^^ ‘);
$(‘#complaintCode’).val(detail[0]);
$(‘#complaintName’).val(detail[1]);
}
}
});
/*End Autocomplete Function Description*/Hi rose88,
We do not experience such an issue with any of the jqxInput demos showing the autocomplete functionality. Please check these out. If you continue to experience the issue, please provide us with a complete example we can test. Remember to format your code by selecting it and clicking the
code
button in the toolbar.Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Hi,
I am facing the same issue. If I have already selected a value from the autocomplete dropdown box, then, if I change the value in the text field then it retains the previously selected value as the ‘value’ of the jqxinput instead of the newly typed value.
Here is an example code. I noticed that the issue comes when displayMember and valueMember are specified.div id='content'> <script type="text/javascript"> $(document).ready(function () { var countries = [{'name':"Afghanistan",'code':'Af'}, {'name':"Albania",'code':'Al'}]; $("#input").jqxInput({placeHolder: "Enter a Country", height: 25, width: 200, minLength: 1, source: countries, displayMember: "name", valueMember: "code" }); $( "#test" ).click(function(event) { $('#result').text($("#input").val().value); }); }); </script> <input type="text" id="input"/> <input type='button' id='test' value='Select'></button> </div> <div id='result'></div>
How do I fetch the typed value?
Thanks
-RichaHi Richa,
Thank you for your feedback. Here is a workaround for this issue:
<!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"> $(document).ready(function () { var countries = [{ 'name': "Afghanistan", 'code': 'Af' }, { 'name': "Albania", 'code': 'Al' }]; $("#input").jqxInput({ placeHolder: "Enter a Country", height: 25, width: 200, minLength: 1, source: countries, displayMember: "name", valueMember: "code" }); $('#input').on('change', function (event) { if (event.args.value === undefined) { var inputValue = event.target.value; $('#input').val({ label: inputValue, value: inputValue }) } }); $("#test").click(function (event) { $('#result').text($("#input").val().value); }); }); </script> </head> <body class='default'> <div id='content'> <input type="text" id="input" /> <input type='button' id='test' value='Select' /> </div> <div id='result'></div> </body> </html>
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks Dimitar, that did the trick.
-
AuthorPosts
You must be logged in to reply to this topic.