We Keep Coding

Custom Autocomplete with jquery

I am working on jquery autocomplete custom data and display.I want to display some static dropdown on keypress in textbox.when user select that list item i want to add it to textbox.
the code which i have tested is
$('#uinput').keyup(function() {
var val = $('#uinput').val();
if(val.length>1) { // check length
// handle successful DWR response
//alert(data);
var b=[{value: "jquery-ui",
label: "jQuery UI",}];
$('#uinput').autocomplete({source:b,
select: function( event, ui ) {
$( "#uinput" ).val( ui.item.label+"="+document.getElementById('uinput').value );
return false;
}
}).data("autocomplete")._renderItem = function( ul, item ) {
return $( "<li>" )
.data('item.autocomplete', item)
.append( "<a>" + item.label + "=" + document.getElementById('uinput').value + "</a>" )
.appendTo( ul );
};
} else {
$('#uinput').autocomplete([]); // clean
}
});
For reference what i want to do
custom autocomplete

I'm not exactly sure what you're trying to accomplish but I think I've put together this example that I think might help you
https://jsfiddle.net/mgxnxhs8/5/
here's my javascript
$(function () {
var availableTags = [{
label: "jQuery 1.9.1",
value: "http://code.jquery.com/jquery-1.9.1.js",
}, {
label: "jQuery 2.1.4",
value: "http://code.jquery.com/jquery-2.1.4.js",
}];
$('#uinput').autocomplete({
source: availableTags,
minLength: 0,
select: function (event, ui) {
$('#uoutput').val(ui.item.value);
return false;
}
}).focus(function () {
$(this).autocomplete("search");
});
});
The dropdown opens up when you enter the textbox and displays the "label" key of the tags. On Select(), it sets the value of another textbox to the "value" key of the selected tag.
Let me know if theres something I missed. Hope this helps

Jquery Autocomplete Select TypeError: ui.item undefined

I am using jquery ui 1.10.3 and jquery 2.0.3.
I am trying to use the autocomplete function to change text of another text box on selecting an option from the suggested options from autocomplete.
Below is my code for the autocomplete function. I do get the results as needed but when I select an option from it, I get the TypeError: ui.item is undefined error.
<script language="javascript">
$(document).ready(function(){
$('#item_code').autocomplete({
source: "http://localhost/test/item/search_item",
minLength: 1,
select: function( event, ui ) {
$( "#item_description" ).val(ui.item.description );
return false;
}
}).data("ui-autocomplete" )._renderItemData = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.value + " - " + item.description + "</a>" )
.appendTo( ul );
};
});
</script>
I have scoured the net but I have come to a point where I find banging my head on the table.
Any help is greatly appreciated.

You should only need to change the one data property:
.data('item.autocomplete')
was deprecated in favour of
.data('ui-autocomplete-item')
As of jQuery UI 1.9 and removed as of jQuery UI 1.10
http://jqueryui.com/upgrade-guide/1.10/#removed-item-autocomplete-data-use-ui-autocomplete-item

I had a similar problem, but this was because the jQuery documentation now shows the usage for jQuery UI 1.10 and our website is still using jQuery UI 1.8.20.
This is what worked for me in the end.
.data("autocomplete")._renderItem = function (ul, item) {
return $("<li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "<br><b>" + item.category + "</b></a>").appendTo(ul);
};

turns out I had to change
data("ui-autocomplete" )._renderItemData = function( ul, item ) {
and
.data( "item.autocomplete", item )
to
data("ui-autocomplete" )._renderItem = function( ul, item ) {
and
.data( "item.autocomplete-item", item )
hope this helps anyone who has migration issues with jQuery UI

JQuery _renderItem not being called

I am trying to create a custom ui-menu-item element using the _renderItem function but after may tries I can't get the function to even be called. The auto-complete is working but it is like the _renderItem function is not there. Here is my script scction
<script language="Javascript" type="text/javascript">
function split( val ) {
return val.split( /,\s*/ );
}
function extractLast( term ) {
return split( term ).pop();
}
$j(document).ready(function() { //START of ready function
$j( "#custom-report" )
.autocomplete({
source: function( request, response ) {
$j.getJSON( "<?=$this->url(array("controller"=>"report", "action"=>"custom-autocomplete"))?>", {
term: extractLast( request.term )
}, response );
},
search: function() {
//Place holder
},
focus: function (event, ui) {
// Prevent the default focus behavior.
event.preventDefault();
},
select: function( event, ui ) {
var terms = split( this.value );
terms.pop();
terms.push( ui.item.value );
this.value = terms.join( ", " );
return false;
}
}).data("autocomplete")._renderItem = function (ul, item) {
return $("<li />")
.data("item.autocomplete", item)
.append("This is the text")
.addClass("tip")
.attr("desc", "This is the description")
.appendTo(ul);
};
}); //END of ready function
</script>
Anyone have any idea why this is not working?

I ended up having to do this
$.ui.autocomplete.prototype._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.addClass("tip ui-menu-item")
.append("<a>" + item.label + "</a>")
.attr("desc", item.description) /* This is the filed that started the whole thing */
.attr("role", "presentation")
.appendTo(ul);
};

It depends on jQuery UI version, in the newer version the object model is changed (see: http://jqueryui.com/upgrade-guide/1.10/#autocomplete).
The example on the jQuery UI site is based on jQuery UI 1.10.
1.9 and minor:
.data("autocomplete")._renderItem = function (ul, item) {
return $("<li />")
.data("item.autocomplete", item)
.append("This is the text")
.addClass("tip")
.attr("desc", "This is the description")
.appendTo(ul);
};
1.10 and next:
.data("ui-autocomplete")._renderItem = function (ul, item) {
return $("<li />")
.data("ui-autocomplete-item", item)
.append("This is the text")
.addClass("tip")
.attr("desc", "This is the description")
.appendTo(ul);
};

jQuery Catcomplete with links

So, I'm trying to use HTML links in my catcomplete results, but jquery automatically transforms my html code into text, like on the image:
And my jQuery code is:
$( "#global-search" ).catcomplete({
delay: 0,
source: "globalsearch.php"
});
Please, dont say to me to use select: function( event, ui ) {
window.location.href = ui.item.value;
}, because it works only once when using ajax (I really don't know why, but it just doesn't work), and I asked some questions here yesterday asking how to fix it, and nobody helped me with it.
So, back with the html transformed into text, how can I add an html hyperlink to my results?
globalsearch.php:

Take a look at the Custom Data and Display example. You will see that they have replaced the _renderItem method with a custom one. You'll need to do the same thing to override how your items are displayed.
$('#global-search').data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li>" )
.data( "item.autocomplete", item )
.append((item.link) ? "<a href='" + item.link + "'>" + item.label + "</a>" : "<a>" + item.label + "</a>" )
.appendTo( ul );
};
Without seeing the output of your globalsearch.php I can't tell you exactly how to set it up, but basically you'd want to add a link attribute to your returned JSON and if the link exists, print the anchor with the link as its href.
How you handle the selection links vs outside links is left as an exercise to the OP.

From the autocomplete widget documentation
Independent of the variant you use, the label is always treated as
text. If you want the label to be treated as html you can use Scott
González' html extension. The demos all focus on different variations
of the source option - look for one that matches your use case, and
check out the code.
Scott González' html extension is https://github.com/scottgonzalez/jquery-ui-extensions/blob/master/autocomplete/jquery.ui.autocomplete.html.js. I have also posted the code below.
/*
* jQuery UI Autocomplete HTML Extension
*
* Copyright 2010, Scott González (http://scottgonzalez.com)
* Dual licensed under the MIT or GPL Version 2 licenses.
*
* http://github.com/scottgonzalez/jquery-ui-extensions
*/
(function( $ ) {
var proto = $.ui.autocomplete.prototype,
initSource = proto._initSource;
function filter( array, term ) {
var matcher = new RegExp( $.ui.autocomplete.escapeRegex(term), "i" );
return $.grep( array, function(value) {
return matcher.test( $( "<div>" ).html( value.label || value.value || value ).text() );
});
}
$.extend( proto, {
_initSource: function() {
if ( this.options.html && $.isArray(this.options.source) ) {
this.source = function( request, response ) {
response( filter( this.options.source, request.term ) );
};
} else {
initSource.call( this );
}
},
_renderItem: function( ul, item) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( $( "<a></a>" )[ this.options.html ? "html" : "text" ]( item.label ) )
.appendTo( ul );
}
});
})( jQuery );
EDIT try the code below while using the extension
$( "#global-search" ).catcomplete({
delay: 0,
html: true,
source: "globalsearch.php"
});

How to implement custom css to jquery autocomplete

I have functioning jquery autocomplete search feature on my site where the user enters a partial name and it finds the matching full names from the database. The issue is that when there is a match, I've not been able to display the name matches using the following markup. It's working with the default autocomplete markup which is looking pretty bad. I need the results to show up in the li in the example below.
<div class="search_dropdown_wrapper">
<div id="search_arrow" class="dropdown_pointer search"></div>
<ul>
<li>
<a>Sam Cohen</a>
<p>Software Engineer</p>
</li>
</ul>
</div>
I'm having trouble wrapping the ul in the autocomplete with the above divs. I've tried playing with the code and I got it to partially display the results with the markup but the link feature got messed up and clicking on the name no longer populated the text box. Here is the autocomplete code I'm using..
if($('#search_name').length > 0){
$('#search_name').autocomplete({
minLength: 2,
source: '/profiles/jquery_auto_complete_name',
focus: function(event, ui) {
$('#search_name').val(ui.item.first_name + " " + ui.item.last_name);
return false;
},
select: function(event, ui) {
$("#receiver-list").val(ui.item.first_name + " " + ui.item.last_name);
return false;
}
})
.data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append("<a>" + item.first_name + " " + item.last_name + "</a>")
.appendTo( ul );
};
}
(credit: thanks to How to set-up jquery-ui autocomplete in Rails for a great example of auto-complete)
Thank you.

You can find a marvelous gem for this:
https://github.com/crowdint/rails3-jquery-autocomplete
Best regards!