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)
Related
I have a search input field - where when the user search for any string it will show up the autocomplete dropdown. But, for some reason it is not showing up the autocomplete dropdown. But when I locate my base url and end with /JobSearchItem.xhtml path in my address bar it will just return my json formatted result. But, it does not show any autocomplete dropdown. Can anyone check of how I can make my autocomplete to show. thanks.
PS: Let me know if you guys need me to show any more code.
Here is my code:
$(function() {
var base_url = "http://localhost:8080/myapp/";
$( "#searchTextField" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: base_url + "JobSearchItem.xhtml",
dataType: "json",
data: {
q: request.searchValue
},
success: function( data ) {
response( $.map(data, function(v,i) {
return { jobClassCD: v.jobClassCD, jobClassTitle: v.jobClassTitle };
})
);
}
});
});
});
json response
[{"jobClassCD":"1000","pGrade":"0","jobGroup":"","jobClassTitle":"ABC DEVELOPER"}
You can try to do like this instead:
$(function() {
var base_url = "http://localhost:8080/myapp/";
$.ajax({
url: base_url + "JobSearchItem.xhtml",
dataType: "json",
data: {
q: request.searchValue
},
success: function(data) {
var newAray = $.map(data, function(v, i) {
return {
jobClassCD: v.jobClassCD,
jobClassTitle: v.jobClassTitle
};
$("#searchTextField").autocomplete({
source: newArray
});
});
}
});
});
I have looked at many, many examples and cannot figure out to get the autocomplete to work. Here is my HTML:
<table>
<tr>
<td>
Item Number:
</td>
<td>
<input id="items" />
</td>
<td>
#Html.DisplayTextFor(x=>x.ItemDescription)
</td>
<td>
#Html.TextBoxFor(x=>x.ItemDescription, new { #id = "txtDescription" })
</td>
</tr>
</table>
And here is my C# code:
public ActionResult GetAllItemNumbers(string data)
{
List<string> result = ItemLookup.GetAllItemNumbers(data);
var result1 = result.Where(item => item.Contains(data)).ToList();
return Json(result1);
}
And here is the JS code:
$("#items").autocomplete({
source: function (request, response) {
$.ajax({
type: 'POST',
dataType: "json",
data: {data: request.term },
url: '#Url.Action("GetAllItemNumbers")',
success: function (data) {
response = $.map(data, function (item) {
return {
value: item
};
});
}
});
},
minLength: 4
});
The correct items are being selected and returned to the success function. But there is no drop down being displayed. How do you show the drop down of values that match the input?
According to the Autocomplete demos, response is a callback function to which you should be passing your data. I think you should change this line:
response = $.map(...);
to
response($.map(...));
The response method is what is responsible for building and showing the drop down. It takes the data returned from the controller. In your original code, you are overriding it, so effectively processing stops at that point, and you don't see the drop down being rendered.
Here is an excerpt from the above link for loading items from a remote data source (comments mine):
$( "#city" ).autocomplete({
source: function( request, response ) {
$.ajax({
url: "http://gd.geobytes.com/AutoCompleteCity",
dataType: "jsonp",
data: {
q: request.term
},
success: function( data ) {
response( data ); // pass data INTO response, don't assign it
}
});
},
minLength: 3,
// other methods omitted
});
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 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.
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);
}
});
})
});