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