How to patch *just one* instance of Autocomplete on a page? - jquery-ui

This answer -- jQueryUI: how can I custom-format the Autocomplete plug-in results? -- describes how to monkeypatch the jqueryUI autocomplete widget, so that it displays things in a particular way. The approach it uses is to replace a function on the $.ui.autocomplete.prototype.
This means that all autocomplete widgets will get this patch.
Is there a way to patch the autocomplete widget for just one input element?
What is it?
When I examine $('$input').autocomplete , I don't see any of the autocomplete fns there (_renderItem, _renderMenu, _search, etc).

Check out the custom data and display demo. This demo is not modifying the prototype object of the autocomplete widget, meaning that only that instance of the widget is effected:
$("selector").autocomplete({ ... }).data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};
Here's a working demo: http://jsfiddle.net/vJSwq/

The code from Andrew Whitaker just work for one autocomplete input. If you select more than one input-element, the second autocomplete widget dosn't show any entrys.
You have to add a foreach to handel all selected input elements like mentioned here
$("selector")
.autocomplete({ ... })
.each(function () {
$(this).data("autocomplete")._renderItem = function( ul, item ) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "<br>" + item.desc + "</a>")
.appendTo(ul);
};
);

For recent versions of jQuery(1.8+) / jQuery UI (1.10+), you should use:
$("selector").autocomplete({ ... }).data('uiAutocomplete')._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
};

Related

Lack of selecting capacity with if statement / append method

I want to propose an autocomplete list (jquery ui 1.8) with some words in bold font.
The JSON source looks like :
{"especes":[{"fk_sp":number,"nom_espece":name,"nom_valide":0 or 1}].
My script is like that :
$(function(){
$('#id').autocomplete({
source: function(request, response) {
$.getJSON("fichier.php", {
term: request.term
}, function(data) {
var array = data.error ? [] : $.map(data.especes, function(m) {
return {
label: m.nom_espece,
value: m.fk_sp,
valid: m.nom_valide
};
});
response(array);
});
},
select: function (event, ui) {
$("#espece").val(ui.item.label);
$("#fk_sp").val(ui.item.value);
}
}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( item.valid == '1' ? "<b>" + item.label + "</b>" : item.label)
.appendTo( ul );
};
});
If I use :
.data( "ui-autocomplete" ) => I have the good selectable list without the bold lines,
.data( "ui-Autocomplete" ) ou .data( "uiAutocomplete" ) => nothing works,
and if I juste write ._renderItem without .data( "ui-autocomplete" ) => I have a pretty list with the good names in bold, but I can't select any name of the list !
I don't find where is my error (I suppose it is somwhere with the "select :" part).

Render json in ruby rails for jquery autocomplete

This is my code which render json in format {"11":"xyz","14":"abc"}
def index
if params[:term] != nil
#products = Hash[current_user.search(params[:term]).map{|product| [product.id,product.name]}]
render json: #products.to_json
end
end
This is the javascript where I am updating div #results with autocomplete result. What I want is to make xyz and abc link with the ids associated with it but I am not able to figure out why I am losing ids all I am getting in results as xyz and abc`.
$(document).ready(function(){
$("#search").autocomplete({
//source: $('#search').data('autocomplete-source'),
source: "entities#index",
open: function(e, ui) {
var list = '';
var results = $('ul.ui-autocomplete.ui-widget-content a');
var ent_id = results.html()
results.each(function() {
list += '<a href= '+$(this).html()+'/'+ent_id+ '>' +$(this).html()+'</a>'+ '<br />';
});
$('#results').html(list);
}
})
} )
Right now above javascript code is not working as required because i am not able to get ids.
Thanks
I found a soulution for it.
$(document).ready(function(){
$( "#search" ).autocomplete(
{
source:"entities#index",
select: function( event, ui ) {
$( "#search" ).val( ui.item[1] );
$( "#results").empty();
$( "#results" ).append( '<a href= '+"entities"+'/'+ui.item[0]+ '>' +ui.item[1]+'</a>' );
return false;
}
}).data( "ui-autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item[1] + "</a>" )
.appendTo( ul );
};
} )

jQueryUI Autocomplete function not properly working on IE9

I am using this snippet of code for my jQueryUI Autocomplete function on my site,
$( "#find" ).autocomplete({
minLength: 1,
source: function(request, response) {
var results = $.ui.autocomplete.filter(locations, request.term);
response(results.slice(0, 10));
},
focus: function( event, ui ) {
$( "#find" ).val( ui.item.value );
return false;
},
appendTo: "#results",
open: function(){
var position = $("#results").position(),
left = position.left, top = position.top;
$("#results > ul").css({left: (left + 15) + "px",
top: (top + 30) + "px", width: (206) + "px" });
},
select: function( event, ui ) {
$( "#find" ).val( ui.item.value );
$(":header.title").html(ui.item.value);
var new_url = ui.item.href; // instead of adding 'statistics', by using location.hash, it wont be necessary unlike using pushState()
location.hash = new_url;
return false;
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "<br />" + item.desc + "</a>" )
.appendTo( ul );
};
Actually this works perfectly fine on Firefox and Chrome, it behaves just like what it exactly behaves on the sample given here, I just merely copied and modified it according to what I wanted. But on IE9, the item.desc which shows up on other browsers is not visible on IE9. I think the code to start with fixing is the last part, the part which appends the suggestions of the autocomplete. Can someone help me out here? Cheers!
You need to upgrade bgiframe.min.js to a later version (3.0 works fine)
https://github.com/brandonaaron/bgiframe
Create a new css class to override the existing jquery ui autocomplete "position":"absolute"
.ui-autocompelte{
"position": "absolute"
....
....
}
New CSS Class
.ui-autocomplete-ie9-fix { position: relative !important; }
and apply this css class after
$("#find").autocompelte({
........
.......
});
if (!$.browser.msie || ($.browser.msie && $.browser.version != 9)) {
$("ul.ui-autocomplete").addClass("ui-autocomplete-ie9-fix");
}
Add below tag after head tag
<meta http-equiv="X-UA-Compatible" content="IE=8" />

How to get Jquery-ui Autocomplete with Codeigniter to display response text

I have got the autocomplete to work but with errors. How would i format the response code correctly?
Response Code:
{
label: "Label 1",
value: "27"
},
{
label: "Label 2",
value: "18"
},
{
label: "Dave",
value: "25"
},
{
label: "Jacqui Potatoes",
value: "17"
}
Javascript:
$("#account_search .ac_input").autocomplete({
minLength: 0,
source: base_url + "accounts/ac_results/account_name",
dataType: "json",
type: "POST",
}).data( "autocomplete" )._renderItem = function( ul, item ) {
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
.appendTo( ul );
return $( "<li></li>" );
};
I think the .data() function is the problem although it is working somehow. I would like to access both the label and value
You've got an error in the _renderItem function (you should call .data on the newly created <li></li>):
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.label + "<br>" + item.value + "</a>" )
.appendTo( ul );
};
I also replaced item.desc which did not exist on your JSON response with item.value.
As a sidenote, you may not need to override that function at all. You only need to use it if you want to change the way each item looks in the suggestion list.
Also, make sure to remove that extra comma in the options object. Additionally, the options dataType and type are not valid options anyway:
$("#account_search .ac_input").autocomplete({
minLength: 0,
source: base_url + "accounts/ac_results/account_name"
});
Example (local data source): http://jsfiddle.net/nG8Q4/

Selecting a jquery-ui-tab based on its id instead of its index?

Anyone know why the following does not work?
$.each( data.d, function( index, item ) {
// creates the tabs with custom ids
$( "#tabs" ).tabs( "add", "page.aspx?id=" + item.id, item.name )
.find('>ul>li:last')
.attr('id', 'tab_' + item.id);
// creates the buttons
$( "#buttons" ).append( "<input type='button' id='buttona" + item.id + "' value='" + item.name + "'>" );
// link buttons with tabs
$( "#buttona" + item.id ).live('click', function() {
$( "#tabs" ).tabs( "select" , "#tab_" + item.id );
});
});
I am trying to assign id's to the tabs, then select the tabs using their id's.
The above does nothing when a button is clicked and it returns no errors at all.
It works fine when using the index as shown below, but I need to use an id for various reasons:
$.each( data.d, function( index, item ) {
// creates the tabs
$( "#tabs" ).tabs( "add", "page.aspx?id=" + item.id, item.name );
// creates the buttons
$( "#buttons" ).append( "<input type='button' id='button" + index + "' value='" + item.name + "-" + index + "'>" );
// link buttons with tabs
$( "#button" + index ).live('click', function() {
$( "#tabs" ).tabs( "select" , index );
});
});
You can use the index() method to get the index of the tab from the id of its header:
$("#button" + item.id).live("click", function() {
$("#tabs").tabs("select", $("#tab_" + item.id).index());
});
Since index() is called without arguments in the code above, it will return the index of the element relative to its siblings, i.e. the other tab headers.
you can switch the tabs with the id of the tab:
var $tabs = $("#tabs").tabs();
$("button").click(function() {
$tabs.tabs( "select", "#tabs-6" );
});
It seems to me that .index() returns an index from 1 so that if I have 3 tabs and want to select the third one, I should return :
$("#button" + item.id).live("click", function() {
$("#tabs").tabs("select", $("#tab_" + item.id).index()-1);
});

Resources