I am using jquery autocomplete. I am facing some issues.
When scrolling through autosuggest in the populated list and hitting the enter key to
select, its not firing the event "select". I am setting a hidden field with the value that is selected. This works fine if i select the item using the mouse.
$(autoSuggestField).autocomplete({
source: function (request, response) {
$.ajax({
url: "../Transport/location",
dataType: "json",
data: {
"prefix": request.term
},
success: function (data) {
response($.map(data, function (item) {
return {
value: item.Name,
x: item.Code
}
}));
}
});
},
minLength: 0,
select: function (event, ui) {
$(codeField).val(ui.item.x);
//sets the value to hidden field.
},
open: function () {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function () {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
Related
I'm using jquery ui autocomplete.
My problem is when I use a call to a external json, the suggest function stops working.
$(document).ready(function() {
$('.comu').autocomplete({
source: function(request, response) {
$.ajax({
url: "https://raw.githubusercontent.com/edusl/test/master/municipios1.json",
dataType: "json",
success: response
});
},
minLength: 0,
autoFocus: true,
select: function(event, ui) {
event.preventDefault();
$(".comu").val(ui.item.label);
},
});
});
Example of my code: codepen
Thanks in advance!
I suspect you could have found someone that answered this already. But here is a solution for you.
$(document).ready(function() {
$('.comu').autocomplete({
source: function(request, response) {
$.ajax({
url: "https://raw.githubusercontent.com/edusl/test/master/municipios1.json",
dataType: "json",
success: function(jData) {
var results = [];
$.each(jData, function(ind, val) {
if (val.label.toLowerCase().indexOf(request.term) === 0) {
results.push(val);
}
});
response(results);
}
});
},
minLength: 0,
autoFocus: true,
select: function(event, ui) {
event.preventDefault();
$(".comu").val(ui.item.label);
},
});
});
Working Example: https://jsfiddle.net/Twisty/mL3h8pm0/
The AJAX request will just return all the results, and that is what you are passing to your response. So if you do not filter that down before you pass it to response you will always end up with a complete list.
This filters the list using indexOf() but you can use any method you'd like.
Here is another solution that will cut down on your HTTP overhead:
var m = [];
$(document).ready(function() {
$.getJSON("https://raw.githubusercontent.com/edusl/test/master/municipios1.json", function(result) {
$.each(result, function(ind, val) {
m.push(val);
});
});
$('.comu').autocomplete({
source: m,
minLength: 0,
autoFocus: true,
select: function(event, ui) {
event.preventDefault();
$(".comu").val(ui.item.label);
},
});
});
Working Example: https://jsfiddle.net/Twisty/mL3h8pm0/2/
This gets all the data once and populates an array. Autocomplete can then use this like normal.
I try to store an identifier into an hiddenfield when a value is selected with a jquery autocomplete field.
But the select event is never fired and I dont't see why..
here is my code
$(document).ready(function () {
$('#test').autocomplete(
{
source: function (request, response) {
$.ajax({
url: "/Controller/Method", type: "POST", dataType: "json",
data: { Comparaison: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item.text, value: item.text, id : item.value };
}));
},
select: function (event, ui) {
alert("selected");
//$("#idProprio").val(ui.item.id);
}
});
},
});
});
The autocompletion is properly working, I can see the values, select one but when I select a value nothig happens..
I believe your curly braces are wrong. select is being set as part of the ajax parameter, not autocomplete:
$(document).ready(function () {
$('#test').autocomplete(
{
source: function (request, response) {
$.ajax({
url: "/Controller/Method", type: "POST", dataType: "json",
data: { Comparaison: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item.text, value: item.text, id : item.value };
}));
}
});
},
select: function (event, ui) {
alert("selected");
//$("#idProprio").val(ui.item.id);
}
});
});
In my jquery autocomplete select function, I need to use the event.preventDefault() method to prevent the default ui.item.value from populating the input text box the autocomplete is wired too. This works great in Chrome, however in IE 8 (which is in use by a majority of our users) the .preventDefault() line throws the following error:
Unexpected call to method or property access
Here is the jQuery for good measure. Does anyone know of a work-around for this method in IE 8?
var tempResults = [];
$(function () {
$('#DRMCompanyName').autocomplete({
source: function (request, response) {
$.ajax({
url: '#Url.Action("compSearchByName", "AgentTransmission")',
type: 'GET',
dataType: 'json',
data: request,
success: function (data) {
tempResults = data;
response($.map(data, function (value, key) {
return {
label: value + " " + key,
value: key
};
}));
},
});
},
minLength: 2,
select: function (event, ui) {
event.preventDefault(); // <-Causing a problem in IE 8...
$('#DRMCompanyName').val(tempResults[ui.item.value]);
$('#DRMCompanyName').text(tempResults[ui.item.value]);
if ($('#DRMCompanyId').text() == '') {
$('#DRMCompanyId').val(ui.item.value);
$('#DRMCompanyId').text(ui.item.value);
}
}
});
});
You could use return false instead but as i said in comment: return false = event.preventDefault() + event.stopPropagation() But in your case, should fit your needs.
I am using the jQueryUI autocomplete, have used it many times before, but I now have a more complex requirement.
I have a variable amount of Autocomplete fields to setup, using a JSON datasource and want to use an $().each to set these up. The problem appears to be the data: property of the AJAX call is always defaulting to values the final Autocomplete I setup.
$('[id$=CheckMethod]').each(function(index) {
if ($(this).val() === 'List') {
fieldToSetup = ($(this).attr('id').replace('txt',''));
fieldToSetup = left(fieldToSetup,(fieldToSetup.length - 11));
alert(fieldToSetup);
$('#txt' + fieldToSetup + 'CodeRoom' + escape(inRoomID)).autocomplete({
source: function (request, response) {
var src,
arrayData;
src = 'AJAXCheckCode.asp?actionType=List&GUID=' + $('#txtGUID').val();
$.ajax({
url: src,
datatype: 'json',
data: 'inCode=' + request.term + '&inType=' + $(this).attr('id'),
success: function (outData) {
arrayData = $.parseJSON(outData);
response($.map(arrayData, function (item) {
var theLabel = (item.Notes.length > 0) ? item.TheCode + ' - ' + item.Notes : item.TheCode;
return {
label: theLabel,
value: item.TheCode
};
}));
}
});
},
minLength: 1,
open: function (event, ui) {
$(".ui-slider-handle ui-state-default ui-corner-all").hide();
$(".ui-autocomplete.ui-menu").width(400);
$(".ui-autocomplete.ui-menu").css('z-index', 1000);
},
close: function (event, ui) {
$(".ui-slider-handle ui-state-default ui-corner-all").show();
},
focus: function (event, ui) {
return false;
},
select: function (event, ui) {},
search: function (event, ui) {
}
});
}
});//each CheckMethod
This code results in the 1st Autocomplete field using the inType parameter from the last field setup.
I'd rather not code for a maximum of 4 x 6 Autocomplete fileds and am trying to create one function to setup all the fields, is this possible?
Therefore my AJAX URL for my 1st Autocomplete looks like this
http://foo.com/AJAXCheckCode.asp?actionType=List&GUID={838138D6-A329-40F1-924B-58965842ECF8}&inCode=es&inType=A3&_=1335875408670
when "inType" should actually be A2, not A3 which is the last item of the outer $.each()
Hope this makes some sense!
Solved in the end by adding a class to the text box and then using live() on any text box with the given class that hasn't been bound before...works a charm
$('.foo:not(.ui-autocomplete-input)').live('focus', function(){
var fieldToReSource = ($(this).attr('id').replace('txt',''));
fieldToReSource = left(fieldToReSource,(fieldToReSource.length - 5));
$(this).autocomplete({
source: function (request, response) {
var src,
arrayData;
src = 'AJAXCheckCode.asp?inType=' + fieldToReSource + '&actionType=List&GUID=' + $('#txtGUID').val();
$.ajax({
url: src,
datatype: 'json',
data: 'inCode=' + request.term,
success: function (outData) {
arrayData = $.parseJSON(outData);
response($.map(arrayData, function (item) {
var theLabel = (item.Notes.length > 0) ? item.TheCode + ' - ' + item.Notes : item.TheCode;
return {
label: theLabel,
value: item.TheCode
};
}));
}
});
},
minLength: 1,
open: function (event, ui) {
$(".ui-slider-handle ui-state-default ui-corner-all").hide();
$(".ui-autocomplete.ui-menu").width(400);
$(".ui-autocomplete.ui-menu").css('z-index', 1000);
},
close: function (event, ui) {
$(".ui-slider-handle ui-state-default ui-corner-all").show();
},
focus: function (event, ui) {
return false;
},
select: function (event, ui) {
},
search: function (event, ui) {
}
});
});
My question is: How to attach the same series of events to many id's
in this case I'm attaching all of this code to "#employeeBox"
$("#employeeBox").autocomplete({
source: function (request, response) {
$.ajax({
url: '<%:ResolveUrl("~/Lookup/SearchEnterpriseUsers")%>',
dataType: "json",
data: {
featureClass: "P",
style: "full",
maxRows: 12,
nameLike: request.term
},
success: function (data) {
response($.map(data, function (item) {
return {
label: item.FullName,
value: item.EmployeeId
}
}))
}
})
},
minLength: 2,
select: function (event, ui) {
alert(ui.item.value)
},
open: function () {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function () {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
What if I want to attach it to many id's.
Like
for (int i=0; i < count; i++)
"#employee_" + i + "_Box"
what's the best way to do this without a lot of repeated code?
thanks!
if you can, just add a class to all your elements and attach the event to that class instead of to a bunch of ids.
$('.myClass').live('myevent', function(e) { //some function });
If you gave them all a class of employeeBox you could just do $('.employeeBox').autocomplete().