CODEWITHSUNDEEP
javascriptphpjquery
user6230357
user6230357

Reputation:

Jquery autocomplete with href clickable

i have following codes:

 <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>

Then in body i got a simple search button where all data from db are shown as per above scripts with autocomplete.

So currently there isn't anything that happens when enter or seach button is clicked. So can we have something like after "label" & "category" as link/href so as clicked on particular item on search it uses link/href & takes to that page directly.

Upvotes: 0

Views: 1119

Answers (1)

Mostafa Saeed
Mostafa Saeed

Reputation: 27

you can do so by adding 'select' event for example:

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

Upvotes: 1

Related Questions