Jquery Autocomplete Where The Results Are Links

JQuery Autocomplete Where the Results are Links

This is simple. Change your source to an array of objects, such as:

var source = [ { value: "www.foo.com",
                 label: "Spencer Kline"
               },
               { value: "www.example.com",
                 label: "James Bond"
               },
               ...
             ];

The just use the select method to redirect to the 'value', e.g.:

$(document).ready(function() {
    $("input#autocomplete").autocomplete({
        source: source,
        select: function( event, ui ) { 
            window.location.href = ui.item.value;
        }
    });
});

jQuery Autocomplete as Links

You can just add a URI attribute to the dataset, and then use it inside select function, here is a working snippet:

$(function() {
      $("#search").autocomplete({        source: //"autocomplete.php",        [          {id:"Wikipedia",           value:"Wikipedia",           label:"Wikipedia",           uri: 'https://www.wikipedia.org/',           img:"https://upload.wikimedia.org/wikipedia/commons/6/63/Wikipedia-logo.png"},                    {id:"Google",           value:"Google",           label:"Google",           uri: 'https://www.google.com',           img:"https://www.buro210.nl/wp-content/uploads/2017/05/google-logo-icon-PNG-Transparent-Background-e1495781274381.png"}        ],        minLength: 1,        select: function(event, ui) {          //console.log(ui.item);                    //var url = ui.item.uri;          //if(url !== '') {            location.href = ui.item.uri;          //}                  },        html: true,         open: function(event, ui) {          $(".ui-autocomplete").css("z-index", 1000);
        }      })        .autocomplete( "instance" )._renderItem = function( ul, item ) {        return $( "<li><div><img src='"+item.img+"'><span>"+item.value+"</span></a></div></li>" ).appendTo( ul );      };
    });

.center {  margin: auto;  width: 45%;  border: 0px solid #73AD21;  padding: 10px;  text-align: center;}
#search{ text-align: left; padding-right: 10px; padding-left: 10px; border: 1px solid #c2c2d6; width:100%; max-width: 400px;  border-radius: 5px;  height:25px; background-color: #e0e0eb;
}
.ui-menu img{  width:40px;  height:40px;  border-radius: 8px;}.ui-menu li span{ display: inline-block; font-size:15pt;  padding:0px 0px 10px 10px;  margin:0 0 10px 0 !important;  white-space:nowrap; vertical-align: middle;  border-radius: 30px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<div class="center"><input type="text" id="search" placeholder="What are you looking for?"><img src="https://cdn1.iconfinder.com/data/icons/hawcons/32/698956-icon-111-search-512.png" alt="Search" style="height:38px;vertical-align: middle;"><br></div>

Binds links to the returned results for jQuery Autocomplete UI

You can simply use autoComplete select feature which will let you binds links to the returned results for autocomplete.

You also need to save your data like this below. So the URL of autocomplete words can be opened when clicked on the selection.

To open the search results we can use window.open this mean the url will be opened in new tab.

Working Demo: https://jsfiddle.net/09dtrk7L/2/

Run snippet below (Note: The url will not open here so you need to try the Demo link above. window.open is blocked by the snippet.)

$(function() {

  //Your autocomplete data
  var availableTags = [{
      value: "Google",
      url: "http://www.google.com/",
      label: "Google"
    },
    {
      value: "Example website",
      url: "http://www.google.com/",
      label: "Example website"
    },

  ];

  //Autocomplete
  $("#tags").autocomplete({
    source: availableTags,

    //Open window on select
    select: function(event, data) {
      window.open(data.item.url, '_blank');
    }
  });
});

.ui-menu-item-wrapper {
  text-decoration: underline;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="//jqueryui.com/jquery-wp-content/themes/jqueryui.com/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>

<body>
  <div class="ui-widget"> <label for="tags">Tags: </label> <input id="tags"> </div>
</body>

</html>

Make a inside jQuery autocomplete clickable

One way to do it is by defining a custom select function and by not using an <a> for the links

HTML:

<div class="ui-widget">
    <label for="tags">Tags:</label>
    <input id="tags">
</div>

JS:

 var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"];

$("#tags").autocomplete({
    source: availableTags,
    select: function (event, ui) {
        var elem = $(event.originalEvent.toElement);
        if (elem.hasClass('ac-item-a')) {
            var url = elem.attr('data-url');
            event.preventDefault();
            window.open(url, '_blank ');
        }
    }
}).data("ui-autocomplete")._renderItem = function (ul, item) {
    return $("<li></li>")
        .data("item.autocomplete", item)
        .append('<a>' + item.label + '<span class="ac-item-a" data-url="http://www.nba.com"> View Details</span></a>')
        .appendTo(ul);
};

JSFIDDLE.

Getting jQuery autocomplete to display results as links

The first issue you have is that the JSON being returned by your server is not in the correct format to work with the autoComplete plugin. The plugin depends on the data in the response having label and value properties. You need to change the names of the name and author_url properties given in the response, like this:

[{
    "label": "John Doe",
    "value": "http:\/\/example.com\/author\/john-doe\/",
    "avatar": "http:\/\/example.com\/uploads\/1425487372-96x96.jpg"
},{
    "label": "Jane Doe",
    "value": "http:\/\/example.com\/author\/jane-doe\/",
    "avatar": "http:\/\/example.com\/uploads\/1425487372-96x96.jpg"
}]

From there you just need to amend the rendering function to read those properties and format the HTML as required:

.autocomplete("instance")._renderItem = function(ul, item) {
    return $("<li>")
        .append('<a href="' + item.value + '"><img src="' + item.avatar + '" />' + item.label + '</a>')
        .appendTo(ul);
};

Working example

Styling links in jQuery UI autocomplete results

Looks like the link in the list item has a background-image set. This will override any background colors you use.

You can set the background-image: none for that particular link

Something like:

ul.ui-autocomplete li:hover a
{
    border:none;
    background-color: #05e5e5;
    background-image: none;
}

Example of link with background image and one without:
https://jsfiddle.net/yuwhuwkz/1/

How to display jquery auto complete result as links

Make use of the _renderItem option provided by default. Below is the sample.

$("#project").autocomplete({
    source: "http://localhost:8888/store/test/search/?"
})
.autocomplete( "instance" )._renderItem = function( ul, item ) {
    return $( "<li>" )
        .append( '<div><a href="http://localhost:8888/store/product/view/' + item.id + '"></a>' + item.desc + '</div>' )
        .appendTo(ul);
         //Assuming here your item contains product id and description
};

Here is their official documentation on custom data

I would like to suggest here to use relative url instead of absolute url, since production might not have localhost instead it will have domain name.

Jquery UI Autocomplete- How to format results AND add button at end?

Consider the following code.

Working Example: http://jsfiddle.net/Twisty/wur8vok9/23/

HTML

Search: <input id="search1">

JavaScript

var products = [{
    value: "MS-Word",
    label: "Microsoft Word 2013",
    image: "https://upload.wikimedia.org/wikipedia/commons/4/4f/Microsoft_Word_2013_logo.svg"
  },
  {
    value: "MS-Excel",
    label: "Microsoft Excel 2013",
    image: "https://upload.wikimedia.org/wikipedia/commons/8/86/Microsoft_Excel_2013_logo.svg"
  },
  {
    value: "MS-Outlook",
    label: "Microsoft Outlook 2013",
    image: "https://upload.wikimedia.org/wikipedia/commons/0/0b/Microsoft_Outlook_2013_logo.svg"
  },
  {
    value: "MS-PowerPoint",
    label: "Microsoft Word 2013",
    image: "https://upload.wikimedia.org/wikipedia/commons/b/b0/Microsoft_PowerPoint_2013_logo.svg"
  },
  {
    value: "MS-Access",
    label: "Microsoft Access2013",
    image: "https://upload.wikimedia.org/wikipedia/commons/3/37/Microsoft_Access_2013_logo.svg"
  },
  {
    value: "Adobe-PSP",
    label: "Adobe Photoshop CC",
    image: "https://upload.wikimedia.org/wikipedia/commons/a/af/Adobe_Photoshop_CC_icon.svg"
  },
  {
    value: "Adobe-LR",
    label: "Adobe Lightroom CC",
    image: "https://upload.wikimedia.org/wikipedia/commons/5/56/Adobe_Photoshop_Lightroom_Classic_CC_icon.svg"
  },
  {
    value: "Adobe-PRM",
    label: "Adobe Premiere Pro CC",
    image: "https://upload.wikimedia.org/wikipedia/commons/5/58/Adobe_Premiere_Pro_CS6_Icon.png"
  },
  {
    value: "Adobe-ACR",
    label: "Adobe Acrobat",
    image: "https://upload.wikimedia.org/wikipedia/commons/0/0b/Adobe_Acrobat_v8.0_icon.svg"
  },
  {
    value: "Adobe-ILS",
    label: "Adobe Illustrator CS6",
    image: "https://upload.wikimedia.org/wikipedia/commons/d/d8/Adobe_Illustrator_Icon_CS6.png"
  }
];

$(function() {
  $("#search1").autocomplete({
    source: products,
    minLength: 3,
    open: function() {
      var $li = $("<li>");
      var $link = $("<a>", {
        href: "#",
        class: "see-all"
      }).html("See All Results").click(function(e) {
        e.preventDefault();
        $("#search1").autocomplete("option", "minLength", 0);
        $("#search1").autocomplete("search", "");
      }).appendTo($li);
      $li.appendTo($('.ui-autocomplete'));
    },
    select: function(event, ui) {
      event.preventDefault();
      $("#search1").autocomplete("option", "minLength", 3);
    },
    focus: function(event, ui) {
      event.preventDefault();
    }
  }).data("ui-autocomplete")._renderItem = function(ul, item) {
    console.log(ul.content)
    var $div = $("<div>").css("position", " relative");

    $("<img>", {
      src: item.image
    }).css("height", "38px").appendTo($div);
    $("<span>").css({
      position: "absolute",
      top: 0,
      display: "inline-block",
      "margin-left": "3px"
    }).text(item.label).appendTo($div);

    return $("<li>").append($div).appendTo(ul);
  };
});

So you're using _renderItem() properly. I removed the Link from here based on the example you linked to. I moved this to the open callback as is shown in the example. I also switched some of your code. It wasn't wrong, I just prefer this method.

So the items get rendered so that the image and label show as desired. The the open call back adds a final link item that causes the a search for all items. See more: http://api.jqueryui.com/autocomplete/#method-search

Can be called with an empty string and minLength: 0 to display all items.

When an item is selected, the preferred minLength is returned to ensure that if the user starts a new search, it operates the same way it did the first time.

Update

http://jsfiddle.net/Twisty/wur8vok9/40/

Minor cleanup and better separation of code and style.

Hope this helps.

---

Related Topics