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>

Answer 1

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>