jQuery Autocomplete as Links

Question

I'm trying to create a search function for my charities internal website to help staff find the apps and resources they need. I've got it so far, but I cant for the life of me get the results to link to the places I need them to.

Here's my code so far, with test entries Wikipedia and Google.

Any tips would be appreciated!

$(function () { $("#search") .autocomplete({ //"autocomplete.php", source: [ { id: "Wikipedia", value: "Wikipedia", label: "Wikipedia", img: "https://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png", }, { id: "Google", value: "Google", label: "Google", img: "https://www.buro210.nl/wp-content/uploads/2017/05/google-logo-icon-PNG-Transparent-Background-e1495781274381.png", }, ], minLength: 1, select: function (event, ui) { /* var url = ui.item.id; if(url != '') { location.href = '...' + url; } */ }, html: true, open: function (event, ui) { $(".ui-autocomplete").css("z-index", 1000); }, }) .autocomplete("instance")._renderItem = function (ul, item) { return $( "<li><div><img src='" + item.img + "'><span>" + item.value + "</span></a></div></li>" ).appendTo(ul); }; });

.center { margin: auto; width: 45%; border: 0px solid #73AD21; padding: 10px; text-align: center; } #search{	text-align: left;	padding-right: 10px;	padding-left: 10px;	border: 1px solid #c2c2d6;	width:100%;	max-width: 400px; border-radius: 5px; height:25px;	background-color: #e0e0eb; } .ui-menu img{ width:40px; height:40px; border-radius: 8px; } .ui-menu li span{ display: inline-block;	font-size:15pt; padding:0px 0px 10px 10px; margin:0 0 10px 0 !important; white-space:nowrap;	vertical-align: middle; border-radius: 30px; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div class="center"><input type="text" id="search" placeholder="What are you looking for?"><img src="https://cdn1.iconfinder.com/data/icons/hawcons/32/698956-icon-111-search-512.png" alt="Search" style="height:38px;vertical-align: middle;"><br></div>

ROOT · Accepted Answer · 2020-05-22 01:46:41Z

You can just add a URI attribute to the dataset, and then use it inside select function, here is a working snippet:

$(function() { $("#search").autocomplete({ source: //"autocomplete.php", [ {id:"Wikipedia", value:"Wikipedia", label:"Wikipedia", uri: 'https://www.wikipedia.org/', img:"https://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png"}, {id:"Google", value:"Google", label:"Google", uri: 'https://www.google.com', img:"https://www.buro210.nl/wp-content/uploads/2017/05/google-logo-icon-PNG-Transparent-Background-e1495781274381.png"} ], minLength: 1, select: function(event, ui) { //console.log(ui.item); //var url = ui.item.uri; //if(url !== '') { location.href = ui.item.uri; //} }, html: true, open: function(event, ui) { $(".ui-autocomplete").css("z-index", 1000); } }) .autocomplete( "instance" )._renderItem = function( ul, item ) { return $( "<li><div><img src='"+item.img+"'><span>"+item.value+"</span></a></div></li>" ).appendTo( ul ); }; });

.center { margin: auto; width: 45%; border: 0px solid #73AD21; padding: 10px; text-align: center; } #search{	text-align: left;	padding-right: 10px;	padding-left: 10px;	border: 1px solid #c2c2d6;	width:100%;	max-width: 400px; border-radius: 5px; height:25px;	background-color: #e0e0eb; } .ui-menu img{ width:40px; height:40px; border-radius: 8px; } .ui-menu li span{ display: inline-block;	font-size:15pt; padding:0px 0px 10px 10px; margin:0 0 10px 0 !important; white-space:nowrap;	vertical-align: middle; border-radius: 30px; }

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <div class="center"><input type="text" id="search" placeholder="What are you looking for?"><img src="https://cdn1.iconfinder.com/data/icons/hawcons/32/698956-icon-111-search-512.png" alt="Search" style="height:38px;vertical-align: middle;"><br></div>

Incredible, thanks! I was foolishly typing URL instead of URi ....
Glad to help, please consider accepting answer if you find my answer useful :)

Collectives™ on Stack Overflow

jQuery Autocomplete as Links

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related