JSFiddle - React, Tailwind, and code Playground

by Pratik Bhoir

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>

<div id="refmenu">
    <ul id="list">
        <li><a href="https://www.google.co.in">Google</a>

        </li>
        <li><a href="https://www.google.co.in">Apple</a>

        </li>
        <li><a href="https://www.google.co.in">IBM</a>

        </li>
        <li><a href="https://www.google.co.in">Yahoo!</a>

        </li>
        <li><a href="https://www.google.co.in">Hotmail</a>

        </li>
    </ul>
</div>
<input type="text" id="input1" />

JavaScript

var list = [];
$("#list a").each(function(index,item) {  
    list.push({id:$(item).attr("href"),value:$(item).html()});
});

$("#input1").autocomplete({
        source: function(req, responseFn) {       
                  var re = $.ui.autocomplete.escapeRegex(req.term);
                  var matcher = new RegExp( "^" + re, "i" );
                  var a = $.grep( list, function(item,index){
                      return matcher.test(item.value);
                  });                 
                  responseFn( a );
              },
              select: function(value, data){
                  if (typeof data == "undefined") {       
                  }else {
                     var win = window.open(data.item.id, '_blank');
                      win.focus();
                  }
              }
});