How to trigger another ajax request when autocomplete selection is made? - javascript

I am trying to use autocomplete which call a method on the server to populate the list.
Corresponding JS file calls
$(function () {
$("#search").autocomplete(
{
source: "requests/search",
minLength: 2,
select: function (event, ui) {
//Here I would like to send the parameters.
var itemid = ui.item.id;
alert(itemid);
// How to call another ajax method.
}
})
});

Call its search method inside select event. Try this.
$(function () {
$("#search").autocomplete(
{
source: "requests/search",
minLength: 2,
select: function (event, ui) {
$(this).autocomplete( "search" , ui.item.value );
}
})
});

Related

AutoComplete with Key-Value in grid, showing key when focus

I am using paramquery grid component in which I am trying to use autocomplete.
Column Model for branch:
{ title: "Branch", dataIndx: "branchId", width: 150,
filter: { type: "select",
condition: 'equal',
prepend: { '': '--All--' },
listeners: ['change'],
valueIndx: "branchId",
labelIndx: "branchName",
options: branchList,
},
editor: {
type: "textbox",
init: autoCompleteEditor
//type: function (ui) { return dropdowneditor(this, ui); }
},
render: function (ui) {
for (var i = 0; i < branchList.length; i++) {
var option = branchList[i];
if (option.branchId == ui.rowData.branchId) {
return option.branchName;
}
}
}
}
autoCompleteEditorMethod:
var autoCompleteEditor = function (ui) {
var $inp = ui.$cell.find("input");
//initialize the editor
$inp.autocomplete({
source: function(request, response) {
var rows = imAutocompleteJSONParse(branchList);// this method converting my JSON object into Value and label format.
return response(rows);
},
selectItem: { on: true }, //custom option
highlightText: { on: true }, //custom option
minLength: 0,
select: function(event, ui) {
event.preventDefault();
$(this).val(ui.item.label);
},
focus: function(event, ui) {
event.preventDefault();
$("#search").val(ui.item.label);
}
}).focus(function () {
//open the autocomplete upon focus
$(this).autocomplete("search", "");
});
}
I get branch id into my grid and I have branchList JSON which have branch id & branch Name. Inside grid my render function showing branchName on UI.
But when I click on searchable dropdown I'm getting branch id.
Below snapshot may explain my issue properly.
Summary of issue: I am getting branch id in Grid. With help of render method I am able to show branch name on grid. but when I click on textbox I getting branch id.
http://jsfiddle.net/v4zx8tjc/4/
Like blackmiaool suggests in his comment, this question would be easier to answer with a live demo using something like JSFiddle.
Based on what I can see in your question, which isn't that much, there are a few areas I would take a second look at.
The Source function in JQuery.autoComplete. Where is branchList coming from? I don't see it declared anywhere and why are you not using the 'request' param?
Not sure what your custom properties are doing but it might be a good idea to verify those are not interfering with the results.
Edit 1: Looking back at the code you posted I think I see where your branchList variable is coming from. It would be very helpful to see your imAutocompleteJSONParse() method because I believe that may be where things are breaking down.

how can I set default text and value in jquery autocomplete and trigger select

I have an array of objects (assessorList), how can I set default text and value in the jquery autocomplete and trigger select. For example if I send second object from the array to the function then Assessor 2, Test should be selected with 1116512 in AutoCompleteAssessorID and all the statements under select should be executed for that selection.
My HTML:
<input style="width:300px" id="AutoCompleteAssessor"> <input type="hidden" id="AutoCompleteAssessorID">
My JavaScript:
var assessorList = [{ id:"1116542", label:"Assessor 1, Test"}, { id:"1116512", label:"Assessor 2, Test"}, { id:"1117290", label:"Carey, Peter"}]
function a(ID, Text)
{
$("#AutoCompleteAssessor").autocomplete({
autoFocus: true,
minLength: 3,
source: assessorList,
focus: function(event, ui){
$("#AutoCompleteAssessor").val(ui.item.label);
$("#AutoCompleteAssessorID").val(ui.item.id);
return false;
},
select: function(event, ui){
$("#AutoCompleteAssessor").val(ui.item.label);
$("#AutoCompleteAssessorID").val(ui.item.id);
userId = ui.item.id;
getEventData();
return false;
},
change: function (event, ui){
if(!ui.item)
{
$("#AutoCompleteAssessor").val('');
$("#AutoCompleteAssessorID").val('');
}
}
})
}
I tried $(this).data('ui-autocomplete')._trigger('select', 'autocompleteselect', {item:{value:$(this).val()}}); but i get $(...).data(...) is undefined error.

jQuery UI Autocomplete Suggestions Not Closing on Select

I have an odd problem with a jQuery UI autocomplete. I want it so that when the text field gets focus, a list of all options in the autocomplete comes up. This works, but when selecting an item by clicking on it, the suggestions stay open. I want the suggestions list to disappear like autocomplete normally works.
It works fine when you select the item with your keyboard, but when you click an item, the list just keeps reappearing again over and over again.
To make this problem weirder, the functionality works perfectly when just passing values manually. It only starts happening when I'm passing in a JSON source.
Any ideas!?
Working Code - http://jsbin.com/aFeceTe/1/edit?html,js,output
$(document).ready(function(){
var test = [ { value: "1",label: "Google" }, { value: "2", label:"StackOverflow" }, { value: "3", label:"Microsoft" }, { value: "4", label:"Yahoo" } ];
$("input").autocomplete({
source: test,
delay: 0,
minLength: 0,
select: function(event, ui) {
event.preventDefault();
$(this).val(ui.item.label).attr('title', ui.item.label);
}
}).focus(function () {
$(this).val('').autocomplete("search");
});
});
Broken Code - http://jsbin.com/uyOGUVU/6/edit?html,js,output
$(document).ready(function(){
$("input").autocomplete({
source: 'http://jsbin.com/IdIXIRU/3/js',
delay: 0,
minLength: 0,
select: function(event, ui) {
event.preventDefault();
$(this).val(ui.item.label).attr('title', ui.item.label);
}
}).focus(function () {
$(this).val('').autocomplete("search");
});
});
Try this
$(document).ready(function(){
var temp = true;
$("input").autocomplete({
source: 'http://jsbin.com/IdIXIRU/3/js',
delay: 0,
minLength: 0,
select: function(event, ui) {
event.preventDefault();
$(this).val(ui.item.label).attr('title', ui.item.label);
temp = true;
return false;
}
}).focus(function () {
if(temp) {
$(this).autocomplete("search");
temp = false;
}
});
});
SEE DEMO

JQuery Autocomplete - Force choice

I have a form working with JQuery Autocomplete and it works fairly well. Now I need another element to force a user to select a valid choice in the autocomplete input. The can type whatever they want and everything is filtered by autocomplete. But they have to select something from the served list.
If they don't the inputfield must get blanked. Tried out a few things with change and select to no avail. This is the code of my autocomplete. I saw some examples operation with data instead of source. This seems to make a big difference
$(function () {
$("#sp_name").autocomplete({
minLength: 2,
delay: 300,
source: function (request, response) {
$.ajax({
url: "./Search/",
dataType: "json",
data: {
term: request.term,
zoekterm: $("#al").html()
},
success: function (data) {
response($.map(data, function (item) {
return {
label: item.naam,
value: item.naam
}
}));
}
});
}
})
});
Try this:
I am using a local list here, but you can achieve this via json data source too.
Just add a change event. The only problem this can have is that if user does not click on
the suggestion, it will turn blank (even if user is entering the same text as suggestion).
It will be mandatory for user to click on the suggestion.
var list = ["c", "c++", "c#","Basic","Mongo"];
$('#auto').autocomplete({
source: list,
select: function (event, ui) {
$(this).val(ui.item ? ui.item : " ");},
change: function (event, ui) {
if (!ui.item) {
this.value = '';}
//else { Return your label here }
}
});
JsFidle for it: http://jsfiddle.net/sarcastic/7KdZP/112/
In your case, Change function would be something like this:
change: function (event, ui)
{
if (!ui.label) { this.value = ''; }
}

JavaScript function pass-through?

I'm not sure if this is doable, but I would like to be able to set a jQuery UI event as a function (directly), as opposed to continuing to wrap in additional function(event, ui) { ... } wrappers.
Hopefully you can see what I'm going for from the example below.
Here is what I would like:
$("#auto").autocomplete({
source: "somepage.php",
select: dropdownSelect,
minLength: 0
});
Now I would think that the above would work, since I'm simply trying to say "continue firing this event, just over to that function".
Unfortunately, that will not work, and I'm ending up with this: (and for some reason, a disconnect from all data)
$("#auto").autocomplete({
source: "somepage.php",
select: function(event, ui) { dropdownSelect(event, ui) },
minLength: 0
});
The following two examples should both work in theory:
var dropdownSelect = function(event, ui) {
// Code to select drop down
};
$("#auto").autocomplete({
source: "somepage.php",
select: dropdownSelect,
minLength: 0
});
And this:
function dropdownSelect(event, ui) {
// Code to select drop down
};
$("#auto").autocomplete({
source: "somepage.php",
select: function(event, ui) { dropdownSelect(event, ui) },
minLength: 0
});
JavaScript functions are first class citizens, which means that you can treat them like any other object.
sure why not define that function first:
var dropdownSelect = function(event, ui) { dropdownSelect(event, ui) };
$("#auto").autocomplete({
source: "somepage.php",
select: dropdownSelect,
minLength: 0
});
var dropdownSelect = function(event, ui) { ... };
var onDropdownSelect = function(event, ui) { dropdownSelect(event, ui) };
$("#auto").autocomplete({
source: "somepage.php",
select: onDropdownSelect,
minLength: 0
});

Categories