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().
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);
}
});
});
how we can have autocomplete combo with infinit scroll?
i found an autocomplete jquery ui with infinit scroll, but this autocomplete gets data by pagemethods. but i want to use it in mvc application and want to use an action of a controller to retrieving data.
to use this autocomplete by pagemethods should do this:
$(document).ready(function () {
//Input for testing purposes
$("#inp").smartautocomplete({
getDataFunc: getData,
pageSize: 15,
autoFocus: true
});
});
//Function the SA plugin called when data is needed.
var getData = function (input, pageIndex, pageSize, callback) {
PageMethods.GetData(input, pageIndex, pageSize, function (response) {
if (response) {
response = $.map(response, function (item) {
return {
label: item,
value: item
}
});
callback(response);
}
else callback();
});
};
but i change the way of getting data by using $.ajax:
var getData = function (input, pageIndex, pageSize, callback) {
$.getJSON(
{ url: '#Url.Action("GetData", "Home")' },
{ input: input, pageIndex: pageIndex, pageSize: pageSize },
function (response) {
if (response) {
response = $.map(response, function (item) {
return {
label: item,
value: item
};
});
callback(response);
}
else callback();
});
};
but it does not work, and the action does not called.
this autocomplete is accessible here:
http://www.codeproject.com/Articles/325719/JQueryUI-smartAutocomplete?fid=1683905
i want to know if there is any other solution to have autocomplete with infinit scroll
Replace PageMethod call with AJAX call
$.ajax({
url: '#Url.Action("GetData", "Default")',
type: 'GET',
dataType: 'json',
data: {
input: input,
pageIndex: pageIndex,
pageSize: pageSize
},
success: function (response) {
//alert(response);
if (response) {
response = $.map(response, function (item) {
return { label: item, value: item };
});
callback(response);
} else {
callback();
}
},
error: function (e) {
alert('error' + e);
},
contentType: 'application/json; charset=utf-8'
});
Make sure your controller action is returning JSONResult
return new JsonResult {JsonRequestBehavior = JsonRequestBehavior.AllowGet, Data = data };//new {result = data}
Hope this helps.
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) {
}
});
});
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");
}
});