Using HTML in Jquery UI Autocomplete

Using HTML in jQuery UI autocomplete

Add this to your code:

).data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>"+ item.label + "</a>" )
.appendTo( ul );
};

So your code becomes:

<script type="text/javascript">
$(function () {
$("#findUserIdDisplay").autocomplete({
source: "ui_autocomplete_users_withuname.php",
minLength: 2,
select: function (event, ui) {
$('#findUserId').val(ui.item.id);
return false;
}
}).data("ui-autocomplete")._renderItem = function (ul, item) {
return $("<li></li>")
.data("item.autocomplete", item)
.append("<a>" + item.label + "</a>")
.appendTo(ul);
};
});
</script>

Note: On old versions of jQueryUI use .data("autocomplete")" instead of .data("ui-autocomplete")

jQuery UI, HTML in autocomplete

It seems that you've missed jquery.ui.autocomplete.html.js as the source you've give in your question has used it.

Here I've created a JSFiddle

Markup:

<form>
<input id="recherche" />
</form>

JavaScript code:

(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 );

$('#recherche').autocomplete({
source: [
{
label: "aardvark",
value: "aardvark"
},
{
label: "<b>apple</b>",
value: "apple"
},
{
label: "<i>atom</i>",
value: "atom"
}
],
html: true
});

using that jquery.ui.autocomplete js and its working perfectly fine.

Please do have a look, it will do the trick for you.

Jquery UI Autocomplete- How to format results AND add button at end?

Consider the following code.

Working Example: http://jsfiddle.net/Twisty/wur8vok9/23/

HTML

Search: <input id="search1">

JavaScript

var products = [{
value: "MS-Word",
label: "Microsoft Word 2013",
image: "https://upload.wikimedia.org/wikipedia/commons/4/4f/Microsoft_Word_2013_logo.svg"
},
{
value: "MS-Excel",
label: "Microsoft Excel 2013",
image: "https://upload.wikimedia.org/wikipedia/commons/8/86/Microsoft_Excel_2013_logo.svg"
},
{
value: "MS-Outlook",
label: "Microsoft Outlook 2013",
image: "https://upload.wikimedia.org/wikipedia/commons/0/0b/Microsoft_Outlook_2013_logo.svg"
},
{
value: "MS-PowerPoint",
label: "Microsoft Word 2013",
image: "https://upload.wikimedia.org/wikipedia/commons/b/b0/Microsoft_PowerPoint_2013_logo.svg"
},
{
value: "MS-Access",
label: "Microsoft Access2013",
image: "https://upload.wikimedia.org/wikipedia/commons/3/37/Microsoft_Access_2013_logo.svg"
},
{
value: "Adobe-PSP",
label: "Adobe Photoshop CC",
image: "https://upload.wikimedia.org/wikipedia/commons/a/af/Adobe_Photoshop_CC_icon.svg"
},
{
value: "Adobe-LR",
label: "Adobe Lightroom CC",
image: "https://upload.wikimedia.org/wikipedia/commons/5/56/Adobe_Photoshop_Lightroom_Classic_CC_icon.svg"
},
{
value: "Adobe-PRM",
label: "Adobe Premiere Pro CC",
image: "https://upload.wikimedia.org/wikipedia/commons/5/58/Adobe_Premiere_Pro_CS6_Icon.png"
},
{
value: "Adobe-ACR",
label: "Adobe Acrobat",
image: "https://upload.wikimedia.org/wikipedia/commons/0/0b/Adobe_Acrobat_v8.0_icon.svg"
},
{
value: "Adobe-ILS",
label: "Adobe Illustrator CS6",
image: "https://upload.wikimedia.org/wikipedia/commons/d/d8/Adobe_Illustrator_Icon_CS6.png"
}
];

$(function() {
$("#search1").autocomplete({
source: products,
minLength: 3,
open: function() {
var $li = $("<li>");
var $link = $("<a>", {
href: "#",
class: "see-all"
}).html("See All Results").click(function(e) {
e.preventDefault();
$("#search1").autocomplete("option", "minLength", 0);
$("#search1").autocomplete("search", "");
}).appendTo($li);
$li.appendTo($('.ui-autocomplete'));
},
select: function(event, ui) {
event.preventDefault();
$("#search1").autocomplete("option", "minLength", 3);
},
focus: function(event, ui) {
event.preventDefault();
}
}).data("ui-autocomplete")._renderItem = function(ul, item) {
console.log(ul.content)
var $div = $("<div>").css("position", " relative");

$("<img>", {
src: item.image
}).css("height", "38px").appendTo($div);
$("<span>").css({
position: "absolute",
top: 0,
display: "inline-block",
"margin-left": "3px"
}).text(item.label).appendTo($div);

return $("<li>").append($div).appendTo(ul);
};
});

So you're using _renderItem() properly. I removed the Link from here based on the example you linked to. I moved this to the open callback as is shown in the example. I also switched some of your code. It wasn't wrong, I just prefer this method.

So the items get rendered so that the image and label show as desired. The the open call back adds a final link item that causes the a search for all items. See more: http://api.jqueryui.com/autocomplete/#method-search

Can be called with an empty string and minLength: 0 to display all items.

When an item is selected, the preferred minLength is returned to ensure that if the user starts a new search, it operates the same way it did the first time.

Update

http://jsfiddle.net/Twisty/wur8vok9/40/

Minor cleanup and better separation of code and style.

Hope this helps.

Jquery UI autocomplete. How to write the results inside a div using innerHTML?

As j08691 says, you have to handle the open event of the widget. However, since you also want to select the items in the #results element, copying them will not be enough.

I would suggest you reparent the whole autocompletion menu under your #results element instead, and reset its position style attribute to static so it remains in place:

$("#tags").autocomplete({
source: availableTags,
open: function() {
$(this).autocomplete("widget")
.appendTo("#results")
.css("position", "static");
}
});

You can see the results in this update to your fiddle.

jQuery UI autocomplete doesn't work for me

You have multiple issues with html syntax here:

  • Move the script tags for jquery files to the head tag
  • move your script to after the body

Your script must be after the body tag or it can be placed instead of the head tag and use a document ready check to allow it to run after the page loads (see http://learn.jquery.com/using-jquery-core/document-ready/). Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

    <!DOCTYPE html>
<html>
<head>
<meta charset="iso-8859-1" />
<title>Votre titre</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js"></script>
</head>
<body>
<form>
<input type="text" id="recherche" />
</form>
</body>
<script>
var liste = [
"Draggable",
"Droppable",
"Resizable",
"Selectable",
"Sortable"
];

$('#recherche').autocomplete({
source : liste
});
</script>
</html>

see a working example here https://jsfiddle.net/q7k28bp0/1/



Related Topics



Leave a reply



Submit