Develop Reference

how use autocomplete jquery for 3 same class

i used jqueryui autocomplete iwant be the same work for some input text
but when i use $(this).val() for send value of textbox it show error and when i use (".Degree").val() shows and send to server first textbox it incorrect
function DegreeAutoComplete() {
$(".Degree").autocomplete({
position: { my: "right top", at: "right bottom", collision: "none" },
source: function (request, response) {
var spin = $(".spinnerDegree");
spin.addClass("fa-spin fa-spinner");
$.ajax({
url: "#Url.Action("GetDegree")",
type: "POST",
dataType: "json",
data: { search: $(".Degree").val() },
success: function (data) {
spin.removeClass("fa-spin fa-spinner");
response($.map(data, function (item) {
return { label: item.PersianName, value: item.PersianName, id: item.Id };
}));
}
});
},
messages: {
noResults: '',
results: function (resultsCount) { }
},
select: function (event, ui) {
// ui.item.value contains the id of the selected label
alert($(this).val());
$(this).attr("sel", ui.item.id);
}
});
}
when i use: $(this).val();
elem.nodeName is undefined
hooks = jQuery.valHooks[ elem.type ] || jQuery.valHooks[elem.nodeName.toLowerCa...
how can i fix it

this refers to ajax object inside it. Save this reference before using it in inside scope.
var spin = $(".spinnerDegree");
spin.addClass("fa-spin fa-spinner");
var $that = $(this);// save reference
$.ajax({
url: "#Url.Action("
GetDegree ")",
type: "POST",
dataType: "json",
data: { search: $that.val() },//use $that var here
success: function(data) {
spin.removeClass("fa-spin fa-spinner");
response($.map(data, function(item) {
return { label: item.PersianName, value: item.PersianName, id: item.Id };
}));
}
});
EDIT:
Just checked jquery UI doc
You should use request.term thats it.
source: function(request, response) {
$.ajax({
url: "#Url.Action("GetDegree")",
type: "POST",
dataType: "json",
data: {
search: request.term
},
success: function(data) {
//....
}
});
}

my jquery autocomplete not working

i use jquery for create an autocomplete for a textbox, data fetches from an an asmx webservice. i monitor my code on firebug ,this tool shows request sent and xml response recieved . but autocomplete not open for textbox :(
Could someone please tell me why my code for the jquery autocomplete is not working?
jquery code:
<link href="../Script/MainCSS.css" rel="stylesheet" />
<link href="../Script/jquery-ui.css" rel="stylesheet" />
<script src="../Script/jquery-1.10.2.js"></script>
<script src="../Script/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$('.textBox').autocomplete({
source: function (request, response) {
$.ajax({
url: "/Services/BusService.asmx/GetRouteInfo",
data: { param: $('.textBox').val() },
dataType: "json",
type: "POST",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data.d, function (item) {
return {
value: item
}
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
var err = eval("(" + XMLHttpRequest.responseText + ")");
alert(err.Message)
// console.log("Ajax Error!");
}
});
},
minLength: 2 //This is the Char length of inputTextBox
});
});
</script>
my c# code:
[WebMethod]
public string[] GetRouteInfo(string param)
{
List<string> list_result = new List<string>();
AutoTaxiEntities useEntity = new AutoTaxiEntities();
System.Data.Entity.Core.Objects.ObjectResult<DAL.Model.SP_FIND_ROUTE_ROUTESTOPS_Result> sp_result = useEntity.SP_FIND_ROUTE_ROUTESTOPS(param);
foreach (DAL.Model.SP_FIND_ROUTE_ROUTESTOPS_Result sp_result_item in sp_result.ToList())
{
list_result.Add(sp_result_item.ID + "," + sp_result_item.ITEMTYPE + "," + sp_result_item.TITLE);
}
return list_result.ToArray();
}

Looking at your added script references, i think you have not added autocomplete.js script. Please add it and try it once.Please click here

$(document).ready(function () {
$('#<%=txtSearch.ClientID%>').autocomplete({
source: function (request, response) {
$.ajax({
type: "POST",
url: "/Services/BusWebService.asmx/GetRouteInfo",
data: "{ 'param': '" + request.term + "' }",
dataType: "json",
contentType: "application/json; charset=utf-8",
dataFilter: function (data) { return data; },
success: function (data) {
response($.map(data.d, function (item) {
return {
itemid: item.split(',')[0],
itemtype: item.split(',')[1],
label: item.split(',')[2]
}
}))
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 2,
select: function (event, ui) {
$('#<%=hfItem.ClientID%>').val(ui.item.itemid + ',' + ui.item.itemtype + ',' + ui.item.label);
//$("form").submit();
}
});
});

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
}
}));
}
});
},
});
});

When I set jquery autocomplete minLength to 0 it keeps running after the user chose an object

I am using Jquery autocomplete with ajax.
Everything works fine except when I set minLength to 0.
When I choose an element from the list, the autocomplete doesn't stop running and shows me the list again.
Here is the code:
$("#id_from").autocomplete({
source: function (request, response) {
$.ajax({
url: "http://127.0.0.1:8000/core/get_from_cities",
dataType: "json",
data: {term: request.term},
success: function (data) {
response($.map(data.data, function (item) {
return {
label: item.value,
value: item.value
}
}));
}
});
},
minLength: 0
});
Thanks..
EDIT:
Here is the solution I came up with:
$("#id_to").focus(function() {
$( "#id_to" ).autocomplete( "enable" );
});
$("#id_ffrom").autocomplete({
source: function (request, response) {
$.ajax({
url: "http://127.0.0.1:8000/core/get_from_cities",
dataType: "json",
data: {term: request.term},
success: function (data) {
response($.map(data.data, function (item) {
return {
label: item.city,
value: item.city,
}
}));
}
});
},
minLength: 0,
select: function (event, ui) {
$('#id_from_country').val(ui.item.country)
$("#id_ffrom").autocomplete( "disable" );
}
});

jquery autocomplete display the output string

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');
}
});