predictive search

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

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 129 posts 620 karma points

Jul 17, 2017 @ 14:00

0

Predictive Search

Extending Umbraco and using the API

Umbraco 7

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

Countries

B elgium

B razil

Cities

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!

Cheers

Copy Link

David Hutson 48 posts 379 karma points

Jul 17, 2017 @ 15:34

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.

http://easyautocomplete.com/examples

HTML:

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

Json:

{
    "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"}

    ]
}

Javascript:

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"
};

$("#example-heroes").easyAutocomplete(options);

You will need to create a UmbracoApiController to serve up your json. I found this library helps create the Json https://github.com/abjerner/Skybrud.WebApi.Json.

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

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

Best of luck

Copy Link

Alex Brown 129 posts 620 karma points

Jul 18, 2017 @ 07:41

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:

C#:

public class NavbarController : UmbracoApiController
{

    [System.Web.Http.HttpPost]
    public NavbarSearchResult Search(string criteria)
    {
        var model = new NavbarSearchResult();

        return model;
    }
}

HTML:

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

JS:

$(document).ready(function () {

var navbarSearchbox = $("#searchText");

var options = {

    url: function (criteria) {
        return "/Umbraco/Api/Navbar/Search";
    },

    getValue: function (element) {
        return element.name;
    },

    ajaxSettings: {
        dataType: "json",
        method: "POST",
        data: {
            dataType: "json"
        }
    },

    preparePostData: function (data) {
        data.criteria= $("#searchText").val();
        return data;
    },

    requestDelay: 400
};

$("#searchText").easyAutocomplete(options);
});

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

Any ideas?

Copy Link

David Hutson 48 posts 379 karma points

Jul 18, 2017 @ 09:32
0
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.

e.g.
```
using Skybrud.WebApi.Json;
using Umbraco.Web.WebApi;

namespace WebApplication1.Controllers {

    [JsonOnlyConfiguration]
    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/...

Dave
Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?