Hi I got a problem with change event.
By documntation there should be object ui.item
After an item was selected; ui.item refers to the selected item. Always triggered after the close event.
But when I try it ui.item is undefined :( I want unset s_town_id when input in autocomplete doesn't match with data from script.
<input id="s_town" type="text" name="s_town" />
<input type="text" id="s_town_id" name="s_town_id" />
$(function() {
$("#s_town").autocomplete({
source: function(request, response) {
$.ajax({
url: "/_system/_ajax/uiautocomplete.php",
dataType: "json",
data: {
name: "s_town",
term: request.term
},
success: function(data) {
response($.map(data, function(item) {
return {
label: item.whisper_name+ " [" + item.zip_code + " / " + item.lup_state + "]",
value: item.whisper_name,
id: item.whisper_id,
zip_code: item.zip_code,
lup_state: item.lup_state,
stateid: item.stateid
}
}))
}
})
},
minLength: 2,
select: function(event, ui) {
$("#s_town_id").val(ui.item.id);
},
change: function(event, ui)
{
// ui.item is undefined :( where is the problem?
$("#s_town_id").val(ui.item.id);
}
});
});
I find out solution where I testing event.originalEvent.type if it is meneuselected or not and after fail I unset s_town_id. But any better solution is still wellcome.
<input id="s_town" type="text" name="s_town" />
<input type="text" id="s_town_id" name="s_town_id" />
$(function() {
$("#s_town").autocomplete({
source: function(request, response) {
$.ajax({
url: "/_system/_ajax/uiautocomplete.php",
dataType: "json",
data: {
name: "s_town",
term: request.term
},
success: function(data) {
response($.map(data, function(item) {
return {
label: item.whisper_name+ " [" + item.zip_code + " / " + item.lup_state + "]",
value: item.whisper_name,
id: item.whisper_id,
zip_code: item.zip_code,
lup_state: item.lup_state,
stateid: item.stateid
}
}))
}
})
},
minLength: 2,
select: function(event, ui) {
$("#s_town_id").val(ui.item.id);
},
change: function(event, ui)
{
try
{
if(event.originalEvent.type != "menuselected")
{
// Unset ID
$("#s_town_id").val("");
}
}
catch(err){
// unset ID
$("#s_town_id").val("");
}
}
});
});
if ui.item is not defined that means your json source is not well formed.
You have to send a json source like this:
[{"label":"Jean","value":1},{"label":"carl","value":2}]
You can add more key to the array but at least you have to set "label" and "value".
Check the json string.
Also I reckon you to use the last version of autocomplete 1.8.1 at the moment
Related
Hi I'm using jQuery UI Autocomplete and want do something like this: I want to get the list with AJAX when length=3 and this work great it populate the drop-down. Next I want when the length is >3 to use the returned list from the AJAX and filter it. But it give the same list not filtered.
$( ".selector" ).autocomplete({
source:function(request, response) {
var str_req = request.term;
if(str_req.length==3) {
$.ajax({
url: "/?search=1",
type: "GET",
dataType: "json",
data: {term: request.term},
success: function (data) {
auto_data=data;
response(data);
}
});
} else{
return response(auto_data);
}
},
minLength: 3,
select: function( event, ui ) {
console.log( "Selected: " + ui.item.value + " aka " + ui.item.id );
}
});
I would simply set the min to 1 and do a comparison in the source.
$(".selector").autocomplete({
source:function(request, response) {
var str_req = request.term;
if(str_req.length < 3) {
// Send your list back, if it was stored in 'myData'
response(myData);
} elseif(str_req.length==3) {
$.ajax({
url: "/?search=1",
type: "GET",
dataType: "json",
data: {term: str_req},
success: function (data) {
auto_data=data;
response(data);
}
});
} else{
response(auto_data);
}
}
},
minLength: 1,
select: function(event, ui) {
console.log( "Selected: " + ui.item.value + " aka " + ui.item.id );
}
});
You could also do this as a Switch statement:
var str_req = request.term;
switch(true){
case str_req.length < 3:
// Send your list
break;
case str_req.length == 3:
// Perform AJAX & return results
break;
default:
// All other options
response(auto_data);
}
I am trying to make an autocomplete functionality for my page.
I have a textbox and I would like to make suggestions from my database.
I have this JsonResult in my controller:
public JsonResult ItemAutocomplete(string term)
{
var result = _db.SelectTable("SELECT [i].[Name] from [dbo].[Item][i] WHERE [i].[Name] LIKE #0", SqlDb.Params(term +"%"));
return Json(result, JsonRequestBehavior.AllowGet);
}
and in my view:
#Scripts.Render("~/bundles/jqueryui")
<h2>jQuery AutoComplete</h2>
<script>
$(function () {
$('#tags').autocomplete({
source: function (request, response) {
$.ajax({
url: '#Url.Action("ItemAutocomplete")',
extraParams: { term: $('#tags').val(),
dataType: "json",
contentType: 'application/json, charset=utf-8',
data: {
term: $("#tags").val()
},
success: function (data) {
response($.map(data, function (item) {
return {
label: item
};
}));
},
error: function (xhr, status, error) {
alert(error);
}
});
},
minLength: 2
});
});
</script>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
The problem is that my ItemAutocomplete jsonResult always receives a null param... even if I call it directly from localhost, like this: "localhost/Appointment/ItemAutocomplete/item1".
Use (request.term) below
data: { term: request.term }
instead of
data: { term: $('#tags').val() }
In Autocomplete Text box, search string detect by "request.term".
I tried many things.
i cant initialize default selected items.
The values always "undefined".
Can anyone please help me?
i create de select2, and add options for select.
var selected = [{
"id": 50270924,
"full_name": "zquestz/s",
"description": "Open a web search in your terminal.",
"language": "Go"
}, {
"id": 30494317,
"full_name": "haosdent/s",
"description": "s is a tool for ssh like z for cd",
"language": "Shell"
}];
var $gitElement = $(".select2").select2({
ajax: {
url: "https://api.github.com/search/repositories",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term,
page: params.page
};
},
processResults: function (data, page) {
return {
results: data.items
};
},
cache: true
},
data:selected,
escapeMarkup: function (markup) { return markup; },
minimumInputLength: 1,
templateResult: function(repo) {
console.log("res", repo, this);
return '<div class="select2CompanyName">'+repo.full_name+'</div>' +
'<div class="select2CompanyTitle">'+repo.language+'</div>' +
'<div class="select2CompanyTitle">'+repo.description+'</div>';
},
templateSelection: function(repo) {
console.log("sel", repo, this);
return '<div class="select2CompanyResult">' +
'<div class="select2CompanyName">'+repo.full_name+' <br>'+ repo.language +'</div>' +
'<i class="fa fa-pencil-square-o"></i>' +
'</div>';
}
});
for(var i in selected) {
$(".select2").append('<option value="'+selected[i].id+'" selected="selected"></option>');
}
$(".select2").trigger("change");
this version:
jsfiddle
ugly solution would be:
for(var i in selected) {
$(".select2").append('<option value="'+selected[i].id+'" selected="selected">'+JSON.stringify(selected[i])+'</option>');
}
here
working, but ugly
there got a simple way to fix it, u just need to move your template logic to processResults, code should be something like :
function displayItem(repo) {
return {
id : repo.id,
text : '<div class="select2CompanyName">'+repo.full_name+'</div>' +
'<div class="select2CompanyTitle">'+repo.language+'</div>' +
'<div class="select2CompanyTitle">'+repo.description+'</div>'
};
}
....
processResults: function (data, page) {
return {
results: $.map(data.items, displayItem);
};
},
Cost me sometime to find the issue.. I upgrade select2 version to 4.0.2. check fiddle here
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);
}
});
});
I found this example online and it was perfectly fine but I'd like to know how to store (hidden) the employeeID, so it can be used later on the server side.
Thank you
<script type="text/javascript">
$(function() {
$(".tb").autocomplete({
source: function(request, response) {
$.ajax({
url: "EmployeeList.asmx/FetchEmailList",
data: "{ 'mail': '" + request.term + "' }",
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.Email
}
}))
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 1
});
});
</script>
The autocomplete has a change event which is fired when the field is blurred if the value has changed. You need to bind an event handler to this event and then set a hidden field within that event handler.
So
$(".tb").autocomplete({
source: function(request, response) {
$.ajax({
url: "EmployeeList.asmx/FetchEmailList",
data: "{ 'mail': '" + request.term + "' }",
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.Email
}
}))
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 1,
change : function (event,ui) {
$("#hdnEmpId").val(ui.item.value);
}
});
You will have to figure out how you want to implement the change event handler. You can read more about that at http://jqueryui.com/demos/autocomplete/#event-change
Hope this helps!