带有href clickable的Jquery自动完成

Question

我有以下代码：

 <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <style>
  .ui-autocomplete-category {
    font-weight: bold;
    padding: .2em .4em;
    margin: .8em 0 .2em;
    line-height: 1.5;
  }
  </style>  
   <script>
  $.widget( "custom.catcomplete", $.ui.autocomplete, {
    _create: function() {
      this._super();
      this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
    },
    _renderMenu: function( ul, items ) {
      var that = this,
        currentCategory = "";
      $.each( items, function( index, item ) {
        var li;
        if ( item.category != currentCategory ) {
          ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
          currentCategory = item.category;
        }
        li = that._renderItemData( ul, item );
        if ( item.category ) {
          li.attr( "aria-label", item.category + " : " + item.label );
        }
      });
    }
  });
  </script>

  <script>
  $(function() {
    var data = [
    <?php do {  ?>

      { label: "<?php echo $row_Restaurants['RestaurantName']; ?>", category: "Restaurants" },
      <?php } while ($row_Restaurants = mysql_fetch_assoc($Restaurants)); ?>
    <?php do {  ?>


      { label: "<?php echo $row_Localities['LocalityName'];?>", category: "Locality" },
            <?php } while ($row_Localities = mysql_fetch_assoc($Localities)); ?>

    ];

    $( "#search" ).catcomplete({
      delay: 0,
      source: data
    });
  });
  </script>

然后在正文中，我得到了一个简单的搜索按钮，所有来自数据库的数据都按照上面的脚本自动完成显示。

因此，当单击enter或seach按钮时，当前不会发生任何事情。那么我们是否可以在"label“& "category”之后添加类似link/href的内容，这样当在搜索中点击特定项目时，它就会使用link/href &直接转到该页面。

Answer 1

您可以通过添加'select‘事件来执行此操作，例如：

 $( "#search" ).autocomplete({
  delay: 0,
  source: data,
  select: function(event, ui){
       $( "#search" ).val(data); 
  }
});