使jQuery自动完成结果，链接

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
});

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 );
       }
    });

  $(function() {
    var projects = [
      {
        value: "jquery",
        label: "jQuery",
        desc: "the write less, do more, JavaScript library",
        icon: "jquery_32x32.png"
      },
      {
        value: "jquery-ui",
        label: "jQuery UI",
        desc: "the official user interface library for jQuery",
        icon: "jqueryui_32x32.png"
      },
      {
        value: "sizzlejs",
        label: "Sizzle JS",
        desc: "a pure-JavaScript CSS selector engine",
        icon: "sizzlejs_32x32.png"
      }
    ];

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

you can use any custom attributes value,labels are must remaining all are as per your requirement(here we are using desc and icon).