jquery autocomplete display the output string - javascript

I want to have the script display each item on a list of value from a string of comma delimited set.
ex. "one,two,three,four"
On the autocomplete drop down, it should show:
one
two
three
four
However, the current code, show a list of only single char. There should be an easy way to split that list up and display the word instead of char. My javascript is a little limited, if someone can figure it out for me, I would appreciated. thanks. I have been search around and know that you should be able to override the parse function but it has to be easier than that. Also, I am using a webservice to return the string and can be delimited by anything but it needs to show the word.
If anyone knows the answer, I would appreciated...thanks
$("#CustomerID").autocomplete({
source: function(request, response) {
$.ajax({
type: "POST",
url: "/customer/search.asmx/findvalue",
dataType: "json",
data: {
term: request.term
},
error: function(xhr, textStatus, errorThrown) {
alert('Error: ' + xhr.responseText);
},
success: function(data) {
response($.map(data, function(item) {
return {
label: item,
value: item
}
}));
}
});
},
minLength: 2,
select: function(event, ui) {
alert('Select');
}
});
EDIT----------------------
Thank you to the previous poster for help answering.
It seems to be the nuances of the formatting or something.
This works:
success: function (data) {
response($.map(data, function (item) {
return item.split(",");
}));
},
Using this seems to just error out or does nothing:
success: function(data) {
response(data.split(","));
}
I even tried this, it goes through but does not result in a drop down menu:
success: function (data) {
response($.map(data, function (item) {
response(item.split(","));
}));
},
The above seem to work and displays what I want, not sure if it's efficient. If someone wants to explain why? Not sure why in some case you would need a response() and/or a return inorder for the autocomplete to work....

Try using .split() to split your string into an array of strings (an array is required as the source to the autocomplete widget).
$("#CustomerID").autocomplete({
source: function(request, response) {
$.ajax({
type: "POST",
url: "/customer/search.asmx/findvalue",
dataType: "json",
data: {
term: request.term
},
error: function(xhr, textStatus, errorThrown) {
alert('Error: ' + xhr.responseText);
},
success: function(data) {
response(data.split(","));
}
});
},
minLength: 2,
select: function(event, ui) {
alert('Select');
}
});

Related

Autocomplete adding extra spaces

Image Example
Image Example Keyboard
My auto commplete is adding extra spaces when data is selected from web services, how do i fix this?
i've tried mostly everything but isnt getting any results
Code:
https://jsfiddle.net/jz1e4tr6/1/
$(document).ready(function () {
$("#<%=TextBox1.ClientID%>").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("/Normal/WebServices/AutoComplete.asmx/GetSubject")%>',
data: "{ 'prefix': '" + request.term + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
attr: item.split('-')[1]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
An alternative "tweak" but not the right solution... before clicking submit in the code behind... i get the value from the textbox and into a variable. And trim the variable.

jQuery Autocomplete syntax?

I haven't had a lot of experience with jQuery but below is Autocomplete code that is successfully bolding the search characters in the search result dropdown rows:
.autocomplete({
delay: 500,
minLength: 0,
source: function(request, response) {
// delegate back to autocomplete, but extract the last term
var list = $.ui.autocomplete.filter(availableTags, extractLast(request.term));
if (request.term) {
regex = new RegExp('(' + extractLast(request.term) + ')', 'gi');
list = list.map(function(item) {
return {
label: item.label.replace(regex, '<b>$1</b>'),
value: item.value
}
})
}
response(list);
},
I'm now trying to switch the source to an AJAX lookup. Can anyone let me know what the edit would be to the following AJAX code to get bold text characters like the first code example does?
.autocomplete({
delay: 500,
minLength: 0,
source: function (request, response) {
$.ajax({
url: 'default.aspx/fGetCityLookupData',
data: "{'strSearchText': '" + extractLast(request.term) + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('|')[1],
value: item.split('|')[0]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
TIA
Mark
Answered at another forum here: http://forums.asp.net/p/2092693/6042551.aspx?p=True&t=635965068036236809

Jquery autocomplete shows non english letters in result

I have very generic javascript code for autocomplete. Everything works fine, but when You type:
Manner
You will have result:
Manner
Männer
In database i have words with special letters, but in case "manner" i dont want to show word with letter "ä" - as this dont fit to result to me.
How can i ignore results like this ?
Thank You for any advice.
The code:
$(document).ready(function () {
if ($('#tags').length <= 0) {
return;
}
var $project = $('#tags');
$project.autocomplete({
minLength: 2,
source: function (request, response) {
$.ajax({
dataType: "json",
type: 'post',
cache: false,
data: {term: request.term},
url: '/ajax/',
success: function (data) {
response($.map(data, function (item) {
return {
label: item.Cities__zip,
value: item.Cities__zip
}
}));
}
});
},
});
});
This looks to like something that would be better to handled server rather than client side. But if you want to do it in the ajax call you could do something like this, which utilizes a regular expression to match non-English characters, and filters those items out:
$(document).ready(function () {
if ($('#tags').length <= 0) {
return;
}
var $project = $('#tags');
$project.autocomplete({
minLength: 2,
source: function (request, response) {
$.ajax({
dataType: "json",
type: 'post',
cache: false,
data: {term: request.term},
url: '/ajax/',
success: function (data) {
response($.map(data, function (item) {
return (/[^\u0000-\u007F]+/).test(item.Cities__zip) ? null :
{
label: item.Cities__zip,
value: item.Cities__zip
}
}));
}
});
},
});
});

Jquery Mobile JSON string to java-script array

I want to get JSON string to my Jquery Mobile App and add that values in to Java-Script array for future use.
here is the structure of the json
{"daily":[{"a":1,"b":3,"c":2,"d":5,"e":3}]}
here is the link for above daily_report
here is my code
$(document).on('pagebeforeshow', '#pageone', function(e, data){
$.ajax({url: "http://iilsfa.br0s.info/Dashboard/get_daily_report.php",
dataType: "json",
async: true,
success: function (result) {
ajax.parseJSONP(result);
},
error: function (request,error) {
alert('No Network!');
}
});
});
var ajax = {
parseJSONP:function(result){
$.each( result, function(i, row) {
$('#output').append('<li><h3>' + row.a+ '</h3></li>');
// I Need to add json elements to an array here
});
$('#output').listview('refresh');
}
}
#output is a tag located in #pageone
Above code is not working.please show me how to fix it..thank you..
$.ajax({url: "http://iilsfa.br0s.info/Dashboard/get_daily_report.php",
dataType: "json",
async: true,
success: function (result) {
result.daily.forEach(function(el){
$('#output').append('<li><h3>' + el.a+ '</h3></li>');
});
},
error: function (request,error) {
alert('No Network!');
}
});
});

Jquery autocomplete runs after second key pressed?

I want to make autocomplete work on each textboxes using with an attribute "kolonadi"
When i press a key in textbox, the page alerts me "keydown enterance" but the autocomplete is not running. If I press one key more it works correctly.
How can i modify this code?
This is my dynamic input:
<input name="ctl00$MainContent$qtxt_UNVAN" type="text" id="MainContent_qtxt_UNVAN" class="textEntry2 ui-autocomplete-input" kolonadi="UNVAN" style="width:200px;" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
This is jquery autocomplete:
$('.textEntry2').keydown(function () {
alert("keydown enterance");
var kolonadi_ = $(this).attr("kolonadi");
$(this).autocomplete({
source: function (request, response) {
$.ajax({
url: '<%=ResolveUrl("~/AutoCom.asmx/GetValues") %>',
data: "{ 'word': '" + request.term + "','KullaniciIndexInGlob':'<%=KullaniciIndexInGlob %>','BaslikId':'<% =BaslikId %>','columnName':'" + kolonadi_ + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function (data) {
response($.map(data.d, function (item) {
return {
label: item.split('-')[0],
val: item.split('-')[1]
}
}))
},
error: function (response) {
alert(response.responseText);
},
failure: function (response) {
alert(response.responseText);
}
});
},
select: function (e, i) {
$("#<%=hfCustomerId.ClientID %>").val(i.item.val);
},
minLength: 1
});
});
I want to make autocomplate each textboxes using textbox attr "kolonadi"
Then you need to make a jQuery selector that matches that attribute:
$('input[type="text"][kolonadi!=""]').each(function() {
// ...
});
...when I press a key in textbox, page alert me "keydown enterance" but autocomp not running. If I press one key more it runs!
The problem is that the jQuery UI .autocomplete method doesn't immediately bring down the drop-down like you think it does. If you call it once, it converts the input field permanently into an auto-completing field.
So what your code does is check for a keypress, and if it finds it, it turns the text field into an autocomplete. Then the second time you enter a keypress, the auto-complete handler runs and your handler runs, and it gets converted into an autocomplete again.
So just call .autocomplete directly on page load, get rid of the keydown handler, and call it done. You don't need your own key-down handler because the .autocomplete method will insert its own key-down handler.
Something like this:
var textEntry2 = $('.textEntry2');
var kolonadi_ = textEntry2.attr("kolonadi");
textEntry2.autocomplete({
source: function(request, response) {
$.ajax({
url: '<%=ResolveUrl("~/AutoCom.asmx/GetValues") %>',
data: "{ 'word': '" + request.term + "','KullaniciIndexInGlob':'<%=KullaniciIndexInGlob %>','BaslikId':'<% =BaslikId %>','columnName':'" + kolonadi_ + "'}",
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
success: function(data) {
response($.map(data.d, function(item) {
return {
label: item.split('-')[0],
val: item.split('-')[1]
}
}))
},
error: function(response) {
alert(response.responseText);
},
failure: function(response) {
alert(response.responseText);
}
});
},
select: function(e, i) {
$("#<%=hfCustomerId.ClientID %>").val(i.item.val);
},
minLength: 1
});
Edit: the previous code doesn't work, it's necessary to iterate in all inputs from class textEntry2.
You must call the autocomplete in $(document).ready function, not in each keydown. Assuming that all inputs in which you want to use autocomplete are from class textEntry2, you'll need something like:
<script type="text/javascript">
$(document).ready(function(){
$('input.textEntry2').each(function() {
var kolonadi_ = $(this).attr("kolonadi");
$(this).autocomplete(/* do all stuff here */);
});
});
</script>

Categories

Resources