Sign in Register
Go to solution
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
    Alex Brown
    0

    Predictive Search

    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
    David Hutson
    100

    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
    Alex Brown
    0

    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
    David Hutson
    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
Please Sign in or register to post replies

Write your reply to:

Draft