source configuration for array of object

[robsilva]

Hi @running-coder,

What an amazing plugin! I cannot believe I have never heard about it until today.
Thank you very much for making this available to the community.

Anyway, I am having trouble setting the 'path' value given my ajax response below:

[
	{
		"_id": "5878e8c35683511de6ae0601",
		"updated_at": "2017-01-16T15:58:51.655Z",
		"created_at": "2017-01-13T14:48:35.380Z",
		"_category": "586eaef338cf980c1815c7d1",
		"title": "Carousel",
		// ... 
	},
	{
		"_id": "5878eaf02379251e125142ed",
		"updated_at": "2017-01-16T15:59:57.317Z",
		"created_at": "2017-01-13T14:57:52.321Z",
		"_category": "586eaef338cf980c1815c7d1",
		"title": "Gauges",
		// ... 
	},
	// ...
]

I tried:

$.typeahead({
    input: ".js-typeahead",
    order: "asc",
    source: {
        articles: {
            ajax: {
                url: "/articles/search",
                path: ""   // ******** I have tried ' ', [0], [0].title
            }
        }
    },
    emptyTemplate: "no result for {{query}}",
    highlight: true,
    backdrop: {
        "background-color": "#000"
    },
    callback: {
	onInit: function (node) {
            console.log('Typeahead Initiated on ' + node.selector);
        },
	onClick: function (node, a, item, event) {
            // You can do a simple window.location of the item.href
            alert(JSON.stringify(item)); 
		},			        
    }
});

Can anyone spot the issue? Thank you in advance!

[kavin-90]

first of you don't need to parse json because its valid json so you can get any data via item.title

path: title

[running-coder]

hey @robsilva thanks for the kind words! unfortunately it does not get as much exposure as bootstrap's but at the same time I wouldn't be able to handle all of the requests from the community

regarding your init all looks fine (the path param is used if your data is not sitting at the root of your response), you are missing the display key to tell Typeahead which object keys to use for searching

[robsilva]

Thank you for your quick response @running-coder

I have added the display property as follows:

$.typeahead({
    input: ".js-typeahead",
    order: "asc",
    display: ["title"],
    source: {
        articles: {
            ajax: {
                url: "/articles/search",
                path: ""
            }
        }
    },
    emptyTemplate: "no result for {{query}}",
    highlight: true,
    highlight: false,
	hint: true,
    backdrop: {
        "background-color": "#000"
    },
    callback: {
		onInit: function (node) {
            console.log('Typeahead Initiated on ' + node.selector);
        },
		onClick: function (node, a, item, event) {
            // You can do a simple window.location of the item.href
            alert(JSON.stringify(item)); 
		},			        
    },
    debug: true
});

but I am still not seeing any results.

This might not be relevant, but I am using Express and Mongoose to generate the JSON from my search route as follows:

search: function(req, res, next){
    Article.find({})
      .lean()
      .exec(function(err, articles) {
        if(err) return next(err);
        res.setHeader('Content-Type', 'application/json');
        res.status(200).send(articles);   
    });
  },

I put together this 30sec video to show you what's going on:
https://screencast.com/t/fB1sS6gqa5VP

Thank you again for your your time!

[robsilva]

Ah, I think I got it.

I removed 'path' and it worked. :)

$.typeahead({
    input: ".js-typeahead",
    order: "asc",
    display: ["title"],
    source: {
        articles: {
            ajax: {
                url: "/articles/search",
                //path: ""
            }
        }
    },
    emptyTemplate: "no result for {{query}}",
    highlight: true,
    highlight: false,
	hint: true,
    backdrop: {
        "background-color": "#000"
    },
    callback: {
		onInit: function (node) {
            console.log('Typeahead Initiated on ' + node.selector);
        },
		onClick: function (node, a, item, event) {
            // You can do a simple window.location of the item.href
            alert(JSON.stringify(item)); 
		},			        
    },
    debug: true
});

[running-coder]

Awesome, I've added a fix for when path is left blank, also there was a scope issue when doing so which should be fixed and give the proper debug information

Thanks for your feedback rob!