Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

  • Alex Brown 93 posts 433 karma points
    Jul 17, 2017 @ 14:00
    Alex Brown

    Hi All

    I'm looking to create a predictive search for a textbox on a site.

    I want to use ajax calls to go get data from the server.

    However, the predictive search I'm creating needs to be "categorised", and I was hoping someone here could guide me on what the best plugin is for predictive search dropdowns. Here's an example of what it should look like:

    E.g. when I type in "B":


    B elgium

    B razil


    B arcelona

    I was struggling to get JQuery's predictive search working and found it nasty (perhaps due to my own incompetence), and I was wondering if there's any others out there which are recommended.

    Any example code would be appreciated too if possible!


  • David Hutson 48 posts 357 karma points
    Jul 17, 2017 @ 15:34
    David Hutson

    Hi Alex,

    I have been looking at building something very similar. I have a PoC working that uses this plugin, it also supports categories like you requested.


    <input id="example-heroes" placeholder="Heroes" />


        "marvel": [
            {"character": "Superman", "realName": "Clark Kent"},
            {"character": "Batman", "realName": "Bruce Wayne"},
            {"character": "Wonder Woman", "realName": "Diana Prince"}
        "dc-comics": [
            {"character": "Daredevil", "realName": "Matt Murdock"},
            {"character": "Captain America", "realName": "Steven Rogers"},
            {"character": "Spider-Man", "realName": "Peter Parker"}


    var options = {
        url: "resources/heroes.json",
        categories: [{
            listLocation: "marvel",
            maxNumberOfElements: 4,
            header: "Marvel - heroes"
        }, {
            listLocation: "dc-comics",
            maxNumberOfElements: 4,
            header: "DC Comics - heroes"
        getValue: function(element) {
            return element.character;
        template: {
            type: "description",
            fields: {
                description: "realName"
        list: {
            maxNumberOfElements: 8,
            match: {
                enabled: true
            sort: {
                enabled: true
        theme: "square"

    You will need to create a UmbracoApiController to serve up your json. I found this library helps create the Json

    Just update the url property to point at your umbraco api controller

      url: "/Umbraco/Api/[YourControllerName]"

    Best of luck

  • Alex Brown 93 posts 433 karma points
    Jul 18, 2017 @ 07:41
    Alex Brown

    Hi David

    Great reply thank you, but the search text isn't hitting the API controller, and there's no errors. Here's my code:


    public class NavbarController : UmbracoApiController
        public NavbarSearchResult Search(string criteria)
            var model = new NavbarSearchResult();
            return model;


    <input id="searchText" class="form-control" placeholder="Search">


    $(document).ready(function () {
    var navbarSearchbox = $("#searchText");
    var options = {
        url: function (criteria) {
            return "/Umbraco/Api/Navbar/Search";
        getValue: function (element) {
        ajaxSettings: {
            dataType: "json",
            method: "POST",
            data: {
                dataType: "json"
        preparePostData: function (data) {
            data.criteria= $("#searchText").val();
            return data;
        requestDelay: 400

    I've also included the AutoComplete JS file so it isn't that.

    Any ideas?

  • David Hutson 48 posts 357 karma points
    Jul 18, 2017 @ 09:32
    David Hutson

    Hi Alex,

    I have a couple of questions.

    1. It doesn't appear that you are passing the search criteria argument into your NavbarSearchResult() object.

    2. There is no [JsonOnlyConfiguration] attribute to tell the api controller to return Json. By default without any attribute you will get back XML.

    You can use Chrome Dev inspector and look at Network Tab (XHR) to see the ajax request and response to confirm the data being sent and received.

    I would replace the search method first with a call to return a Json object just to make sure the plumbing is working before you get into passing search criteria.


    using Skybrud.WebApi.Json;
    using Umbraco.Web.WebApi;
    namespace WebApplication1.Controllers {
        public class JsonTestController : UmbracoApiController {
            public object GetTest() {
                return new {
                    meta = new {
                        code = 200
                    data = "Yay! We have some JSON!"

    With regards to hitting the controller you should be able to set a breakpoint in Visual Studio. If it doesn't get hit then the url path is wrong, you might need a tilda ~ at the start e.g ~/umbraco/api/...


Please Sign in or register to post replies

Write your reply to: