使jQuery自动完成结果，链接

Question

I'm using jQuery auto-complete, bundled with jquery-ui. Any way, I need to customize this little bit to pop-up links instead of just texts.

I have a multi dimensional PHP array which contains some texts and corresponding id of that text in MYSQL database.

$js_array = json_encode($php_array);
echo "var javascript_array = ". $js_array . ";
";

So, now I have a multidimensional js array. But I have no idea how to use those values to create links.

The text items in the array should be the text part of the links, and the IDs should be the URL of the links.

This is my existing code. How to customize this to achive my puurpose...

$("#search_query").autocomplete( { 
   source: javascript_array
});

Answer 1

Use the _renderItem option:

Method that controls the creation of each option in the widget's menu. The method must create a new <li> element, append it to the menu, and return it.

_renderItem: function( ul, item ) {
  return $( "<li data-value='"+item.value+"'><a href='#'>"+item.label+"</a></li>" )
    .appendTo( ul );
}

---

1) Remove this:

.autocomplete( "instance" )._renderItem = function( ul, item ) {
  return $( "<li>" )
    .append( "<a>" + item.label + "<br>" + item.desc + "</a>" )
    .appendTo( ul );
};

2) Add it up here instead. Make sure you have a href parameter or most browsers won't knowledge it as a link.

$( "#project" ).autocomplete({
      minLength: 0,
      source: projects,
      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 );
        $( "#project-description" ).html( ui.item.desc );
        $( "#project-icon" ).attr( "src", "images/" + ui.item.icon );

        return false;
      },
      _renderItem: function( ul, item ) {
          return $( "<li data-value='"+item.value+"'><a href='#'>"+item.label+"</a></li>" )
               .appendTo( ul );
       }
    });