title: How to debug a jQuery autocomplete that is showing only one result?
body: <p>I am new in JS programming. I have designed a jQuery autocomplete functionality in which when user search in search box then matched result will displayed in highlighted text.</p>
  
  <p>But in my code I have a problem: it is displaying search result while searching but it show only first row text highlighted. Other matching result text are not highlighted. Also when I click matched result then list should disappear but list is not disappearing.</p>
  
  <p>Here is my code with HTML and jQuery autocomplete:</p>
  
  <p><strong>HTML Code:-</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function($) {
  
    var $project = $('#project');
  
    var projects = [
  
      {
        value: "Aditi Deshpande",
        icon: "img-profile-pic-lms.png"
      },
      {
        value: "Aarti Roy",
        icon: "img-profile-pic-lms.png"
      },
      {
        value: "Athiya Patil",
        icon: "img-profile-pic-lms.png"
      },
      {
        value: "Priyanka Deshmukh",
        icon: "img-profile-pic-lms.png"
      },
      {
        value: "Priya Sharma",
        icon: "img-profile-pic-lms.png"
      }
    ];
    var temp = true;
    $project.autocomplete({
      minLength: 0,
      source: projects,
      select: function(event, ui) {
        event.preventDefault();
        $project.val(ui.item.label);
        temp = true;
        return false;
      },
      focus: function(event, ui) {
        if (temp) {
          $(this).autocomplete("search");
          temp = false;
        }
  
      },
      open: function(e, ui) {
        var acData = $(this).data('ui-autocomplete');
        acData
          .menu
          .element
          .find('a')
          .each(function() {
            var me = $('#this');
            var keywords = acData.term.split(' ').join('|');
            me.html(me.text().replace(new RegExp("(" + keywords + ")", "gi"), '&lt;b&gt;$1&lt;/b&gt;'));
          });
      }
    });
    $project.data("ui-autocomplete")._renderItem = function(ul, item) {
      var $li = $('&lt;li&gt;');
      var $img = $('&lt;img&gt;');
      $img.attr({
        src: '../../images/' + item.icon,
        alt: item.label
      });
      $li.attr('data-value', item.label);
      $li.append('&lt;a href="#"&gt;');
      $li.find('a').append($img).append("&lt;span id='this'&gt;      &lt;/span&gt;")
      $li.find('a').append($img).find("span").append(item.label);
      return $li.appendTo(ul);
    };
    $('#project').autocomplete("search", "");
  })(jQuery);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"&gt;&lt;/script&gt;
  &lt;div class="resDiv"&gt;
    &lt;div class="searchbox" id="project-    label"&gt;
      &lt;input id="project" type="text" value="" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>