Jquery: How do I enable autocomplete for multiple search fields on a page?

I have three search forms on a page that act exactly the same, and I'd like to attach an autocomplete to all three forms. Here is my Jquery script that I have on my page:

<script>
  $(function() {
    $( ".search-form" ).autocomplete({
      dataType: "json",
      source: "/app/searches.js"
    })
    .data( "autocomplete" )._renderItem = function( ul, item ) {
      return $( "<li></li>" )
      .data( "开发者_如何学Citem.autocomplete", item )
      .append( item.desc )
      .appendTo( ul );
    };
  });
</script>

And the three search form fields:

<input id="search1" class="search-form"/>

<input id="search2" class="search-form"/>

<input id="search3" class="search-form"/>

The autocomplete only works for the first input field (search1) -- i.e., shows data from the json string.

For the other search fields (search2 and search3) however, I get only blank lists ("<li></li>") without any data from the JSON string.

Is there a way to attach the autcomplete to all three search fields such that all three show data from the JSON string?

This demo works OK for me.

In your code, it is only changing the _renderItem function for one instance of the autocomplete.

Edit: Possible duplicate of jQuery UI Autocomplete Formatting for Multiple Elements