JSFiddle - React, Tailwind, and code Playground

by telizpablo

HTML

<script src="code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="project-label">Select a project (type "j" for a start):</div>
<img id="project-icon" src="images/transparent_1x1.png" class="ui-state-default" alt="">
<input id="project">
<input type="hidden" id="project-id">
<p id="project-description"></p>

JavaScript

$(function() {
    var projects = [
      {
        value: "jquery",
        label: "ab índío"
      },
      {
        value: "jquery-ui",
        label: "ab indio y UI"
      },
      {
        value: "sizzlejs",
        label: "ab Sizzle JS"
      },
       {
        value: "sizzlejs",
        label: "ab 2222"
      }
    ];
 
    $( "#project" ).autocomplete({
      minLength: 0,
      source:  function( request, response ) {
        var matcher = new RegExp( $.ui.autocomplete.escapeRegex( request.term ), "i" );
        response( $.grep( projects, function( value ) {
          value = value.label || value.value || value;
          return matcher.test( value ) || matcher.test( normalize( value ) );
        }) );
      },
      focus: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        return false;
      },
      select: function( event, ui ) {
        $( "#project" ).val( ui.item.label );
        $( "#project-id" ).val( ui.item.value );
        return false;
      }
    })
    .autocomplete( "instance" )._renderItem = function( ul, item ) {
      return $( "<li>" )
        .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
        .appendTo( ul );
    };
  });
  var accentMap = {
      "á": "a",
      "í": "i",
      "ö": "o"
    };
    var normalize = function( term ) {
      var ret = "";
      for ( var i = 0; i < term.length; i++ ) {
        ret += accentMap[ term.charAt(i) ] || term.charAt(i);
      }
      return ret;
    };