jQueryUI autocomplete with clickable links?

Question

This was my first time using jQueryUI autocomplete, I managed to get it working, there is just one more functionality that our client needs, i.e to have clickable categories in the search suggestions.

For example, look at this image:

enter image description here

Its from newegg website, When I search "nvidia", a suggestion list populates, besides just the item name the category it lies in is also shown but the category appears as a text and not link(i.e category itself is not clickable). I do the same, I return the search results from a service running on the server and populate the suggestions. I don't need to return links, I can just split the returned string at "in" to get the "category" and then produce the link as <a href="someinternalpage.aspx?cat=category">Category</a> (This code is just for quick Idea) . But now comes the main problem, how do I populate the suggestions with the above clickable link?

Any help would be most welcomed.

Andrew Whitaker · Accepted Answer · 2016-02-16 16:17:45Z

3

I would tap into the select event that autocomplete exposes and set window.location to the proper URL:

select: function (event, ui) {
    var category = $.trim(ui.item.value.split("in")[1])
        , url = "someinternalpage.aspx?cat=" + category;

    event.preventDefault();
    window.location.href = url;
}

edited Feb 16, 2016 at 16:17

answered Jun 22, 2012 at 17:37

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Ashwin Singh Over a year ago

Thanks for your reply, but what I want is that not the whole list but only when someone clicks whatever follows after "in", be he redirected.

Andrew Whitaker Over a year ago

@AshwinSingh: Could you show the code you currently have? How are you displaying the categories?

Rohan Sharma Over a year ago

@AndrewWhitaker The jsfiddle link doesn't exists. Could up update your answer.

Andrew Whitaker Over a year ago

@user3731784: Thanks for the heads up, I'll try to get a working link up later today.

Aaron Miler · Accepted Answer · 2012-06-22 06:35:42Z

0

Based simply on the demo page for the autocomplete, it seems that the suggestions are targetable.

Meaning, I would register a click function on them to get their content, and then use jQuery to either redirect the window using the correct URL pathing for the search (so something like http://domain.com/search=+content) or use javascript itself to submit the form.

The javascript submit is pretty detailed here http://www.javascript-coder.com/javascript-form/javascript-form-submit.phtml

Without any code, that is how I would address the issue.

answered Jun 22, 2012 at 6:35

Aaron Miler

88911 silver badges22 bronze badges

Collectives™ on Stack Overflow

jQueryUI autocomplete with clickable links?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related