This is in continuation on my previous post, where I had explained how to setup and use the jQuery Tokeninput. In this article, I will be showing you how to use the ‘resultsFormatter’ function.

resultsFormatter is a function that returns an interpolated HTML string for each result. Use this when you want to include images or multiline formatted results.


    SearchWithCity ")", {
        propertyToSearch: "name",
        resultsFormatter: function(item) {
            return "<li>" + + " - <i>" + + "</i>" + "</li>";

and here is my controller action ‘SearchWithCity’…

public JsonResult SearchWithCity(string q)
    var searchResults = Helper.SearchContactByCity(q);
    var jsonResult = searchResults.Select(results => new { id = results.Id, name = results.Name, city = results.City });
    return Json(jsonResult, JsonRequestBehavior.AllowGet);

When you run this code, below is the output you should get.

It is as simple as this, you can include all html tags to customize your search results.