I'm using the JqueryUI autocomplete. Sometimes the fetching of results isn't immediate so I'd like to notify the user the autocomplete is fetching options that match his query.
My Code:
$( "#searchid" ).autocomplete({
source: "/autocomplete_url.php",
minLength:3,
select: function(event, ui) {
event.preventDefault();
$("#searchid").val(ui.item.value);
$("#formid").submit();
}
});
How can I make the autocomplete to open a 'fetching results status bar' when sending a request to the web-service that is working on finding the results?
This approach assumes you're using an Ajax call to retrieve your dataset, but I've used something similar and it worked ok.
Set up a div on the page where you want the message.
HTML:
<div id="AutocompleteStatus" style="display:none">Loading data...please wait</div>
You then want to catch the key up event on your autocomplete:
jQuery:
$( "#searchid" ).keyup(function() {
$('#AutocompleteStatus').show();
});
Then your autocomplete could look something like this:
$( "#searchid" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "/autocomplete_url.php",
dataType: "json",
data: {
style: "full",
maxRows: 12,
name_startsWith: request.term
},
success: function( data ) {
$("#AutocompleteStatus").hide(); // <== HIDE IT HERE
response( $.map( data.returndata, function( item ) {
return {
label: item.name,
value: item.value
}
}));
}
});
}, minLength:3,
select: function(event, ui) {
event.preventDefault();
$("#searchid").val(ui.item.value);
$("#formid").submit();
}
});
So the short version: Key up on your search box shows the div, on the return from your Ajax call (I'm using sample parameter names, your example didn't give any actual names), just hide the div again.
Related
I use the jQuery UI autocomplete fetching data from a Postgresql-database to populate an input-box (parzelle) with label-data. My form then submits the corresponding value-data, stored in a hidden input (gid).
My code works when the page is loaded the first time, sometimes even, when the page is reloaded after submitting the form. In most cases the autocomplete stops working after the first reload of the (same) page.
I use a quite simple modification of the example provided by jQuery UI:
$( "#parzelle" ).autocomplete({
source: function( request, response ) {
$.ajax( {
url: "./mapdata/get_parzellen_list_json.php",
dataType: "json",
data: {
term: request.term
},
success: function( data ) {
response( data );
}
} );
},
minLength: 3,
select: function( event, ui ) {
// prevent autocomplete from updating the input-box (parzelle)
event.preventDefault();
// update the input-box and hidden input (= gid)
$(this).val(ui.item.label);
$("#gid").val(ui.item.value);
}
} );
I am using autocomplete j query to suggest my users some questions and then when user select one of the questions it should shows the answer.
it works fine for the first click
when user clicks on each of these questions the answer is showing correctly but the problem is when user clear the inputs and write another word and then select one of the suggestion for the next time nothing happened after select each one
here is my jquery codes
$("#tags").autocomplete({
source: function (request, response) {
$.ajax({
dataType: 'json',
method: 'POST',
data: {
q: request.term
},
url: 'Help_And_Customer_Support/AjaxQuestion/q',
success: function (data) {
console.log(data.Qu);
response($.map(data, function (item) {
console.log(item.Ans);
return { label: item.Qu, id: item.Ans };
}))
},
});
},
select: function (event, ui) {
$("#showansw").css("height", 200);
var qans = ui.item.id;
var qq = ui.item.label;
$("#showansw p").html(qans);
$("#showansw h5").html(qq);
}
});
Appreciate any help. thanks
I have the following autocomplete that pulls from my ajax data source:
$("#id_q").autocomplete({
source: function (request, response) {
$.ajax({
url: "/search/autocomplete/",
dataType: "jsonp",
data: {
q: request.term
},
success: function (data) {
alert(data);
response(data);
}
});
},
minLength: 3,
select: function (event, ui) {
log(ui.item ?
"Selected: " + ui.item.label :
"Nothing selected, input was " + this.value);
},
open: function () {
$(this).removeClass("ui-corner-all").addClass("ui-corner-top");
},
close: function () {
$(this).removeClass("ui-corner-top").addClass("ui-corner-all");
}
});
Server side I can see that results are being returned correctly and look like:
{"results": ["BEEF", "BEEFARONI", "BEEFARONI", "BEEF", "BEET"]}
The success method never fires the alert.
Also should I rename request.term?
What am I doing wrong and where can I print the data I am returning to figure out what is going on?
Do you pass data to source method?
Is your url correct? I think yours is wrong, try writing the whole URL or use a REST client to check it.
Thanks for the hint #Andrew Whitaker . I removed the entire dataType line and it worked.
I'm using Jquery UI's autocomplete, and I can see the proper JSON data coming back in Firebug. However, nothing's coming back to the textbox.
My JavaScript:
$(function() {
function log( message ) {
$( "<div/>" ).text( message ).prependTo( "#log" );
}
$("#tags").autocomplete({
source: function(request, response){
$.ajax ({
url: "/projectlist",
dataType: "json",
data: {style: "full", maxRows: 12, term: request.term}
});
}
})
});
You can see that from the snippet JSON data is being returned. But nothing is being displayed in the results table. Which should look like the the JQuery autocomplete example JQuery Autocomplete
Noyhing is displayed because you return nothing i think: you must add e success function to your ajax call (i added an example of a success response, if you tell us how your json is tructured i could help you better. in any case you must return an array of objects, and each object should have a property named 'label' and one named 'value':
$("#tags").autocomplete({
source: function(request, response) {
$.ajax({
url: "/projectlist",
dataType: "json",
data: {
style: "full",
maxRows: 12,
term: request.term
},
success: function(data) {
var results = [];
$.each(data, function(i, item) {
var itemToAdd = {
value: item,
label: item
};
results.push(itemToAdd);
});
return response(results);
}
});
}
});
I set up a fiddle here: http://jsfiddle.net/nicolapeluchetti/pRzTy/ (imagine that 'data' is the json that is returned)
I'm using the jQuery UI Autocomplete plug-in to make an ajax call and retrieve data. As well as passing the text of the input element I'm trying to pass in the 'id' attribute of the input element as an additional parameter. An extract of my code looks like this -
$("#autocomplete input").autocomplete({
source: function(request, response) {
$.ajax({
url: "search.php",
dataType: "json",
data: {
term: extractLast(request.term),
extra_param: $(this).attr('id')
},
success: function(data) {
response($.map(data, function(item) {
return {
label: item.label,
value: item.name
}
}))
}
})
},
});
The extra parameter is added to the 'data' property in the ajax call. It works okay if I specifically pass in a value e.g. '3' but I want to pass the 'id' attribute of the input element the function is being called on e.g. $(this).attr('id').
I assume it's a problem with 'this' not being evaluated in this part of the code, but I'm at a loss to see how else I can reference the element that is being targeted. Any help appreciated!
$('#autocomplete input').each(e, function() {
$(e).autocomplete('/path?param=' + $(e).attr('id'), function() { ... });
});
$('#autocomplete input').each(e, function() {
$(e).autocomplete({ source:function ... extra_param: $(e).attr('id') ... });
});
There maybe a more elegant way, but, I know autocomplete is somewhat sophisticated. I personally generate the request w/get parameters and use formatItem/formatResult instead of assigning the source to an ajax call.
I've got it working by breaking the autocomplete call out into an each. This allows me to capture the target element before I execute the autocomplete -
$("#autocomplete input").each(function() {
var that = this;
$(that).autocomplete({
source: function(request, response, this_element) {
$.ajax({
url: "search.php",
dataType: "json",
data: {
term: extractLast(request.term),
extra_param: $(that).attr('id')
}
....
"Source" is the ID of your input, you receive this item and save it in the variable, "that". When the input "Source" calls the autocomplete function, you can send the value of your id stored in the variable "that" for AJAX.
Example:
<script type="text/javascript">
$(document).ready(function() {
$("#Source").each(function() {
var that = this;
var url = "<?php echo constant('URL'); ?>";
$(that).autocomplete({
source: function(request, response){
$.ajax({
url: url+"models/queries/C_getOptions.php",
dataType:"json",
data:{
word:request.term,
id : $(that).attr('id')
},
success: function(data){
response(data);
}
});
},
minLength: 1,
select: function(event,ui){
//alert("Selecciono: "+ ui.item.label);
}
});
})
});