CODEWITHSUNDEEP
javascriptjquerytypeahead.jsbloodhound
Micah
Micah

Reputation: 1716

Typeahead and Bloodhound shows unrelated suggestions when 'remote' is used

When using Typeahead/Bloodhound with a remote option, when the local/prefetch results are under the "limit" (5) the suggestions shown are not related to the input. Looks likes its just showing from the top of the results set up to 5.

Photo: 'Love' is the expected result, everything else is unrelated:

My code:

    var keywords = [
 {"value": "Ambient"}, {"value": "Blues"},{"value":  "Cinematic"},{"value":  "Classical"},{"value": "Country"},
 {"value": "Electronic"},{"value": "Holiday"},{"value": "Jazz"},{"value": "Lounge"},{"value": "Folk"},
  {"value": "Hip Hop"},{"value": "Indie"},{"value": "Pop"},{"value": "Post Rock"},{"value": "Rock"},{"value": "Singer-Songwriter"},{"value": "Soul"},
  {"value": "World"},{"value": "Happy"},{"value": "Sad"},{"value": "Love"},{"value": "Angry"},
  {"value":"Joy"},{"value": "Delight"},{"value": "Light"},{"value": "Dark"},{"value": "Religious"},{"value": "Driving"},
  {"value":"Excited"},{"value": "Yummy"},{"value": "Delicious"},{"value": "Fun"},{"value": "Rage"},
  {"value":"Hard"},{"value": "Soft"}
  ];


// Instantiate the Bloodhound suggestion engine
var keywordsEngine = new Bloodhound({
    datumTokenizer: function (datum) {
        return Bloodhound.tokenizers.whitespace(datum.value);
    },
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: keywords,
    remote: {
        url: '/stub/keywords.json',
        filter: function (keywords) {
            // Map the remote source JSON array to a JavaScript object array
            return $.map(keywords, function (keyword) {
                return {
                    value: keyword.value
                };
            });
        }
    },
    prefetch: {
        url: '/stub/keywords.json',
        filter: function (keywords) {
            // Map the remote source JSON array to a JavaScript object array
            return $.map(keywords, function (keyword) {
                return {
                    value: keyword.value
                };
            });
        }
    }
});

// kicks off the loading/processing of `local` and `prefetch`
keywordsEngine.initialize();

$('#keyword-search-input').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  name: 'keyword',
  displayKey: 'value',
  // `ttAdapter` wraps the suggestion engine in an adapter that
  // is compatible with the typeahead jQuery plugin
  source: keywordsEngine.ttAdapter()
});

Upvotes: 4

Views: 1476

Answers (2)

Jam1
Jam1

Reputation: 649

I wish to go more in deep on this question for future references. Bear in mind that I am not a JavaScript expert or any expert for that matter. With the Bloodhound engine it does not accommodate constant dynamic interactions with the search parameter for a remote url. Because of this, if you are using some json file, the typeahead search box will only display the limit. So if limit: 10 then the first 10 records of the json data will be displayed, and the result will not change despite the user typing. Only the the first record of the json will have a suggestion based on user prompts which is trivial.

However if the remote source has a query(eg fire query) that gets the required results as in this example, then the search box will be filled with the relevant results each time the search box is populated.

So what if you have a large json file, which you generated from some database, and rather not use prefecth? Obviously for speed and efficiency you will need to use remote. Using php script you would need to do something like:

$key=$_GET['key'];
$con=mysqli_connect("localhost","root","");
$db=mysqli_select_db($con, "database_name");
$query=mysqli_query($con, "SELECT * FROM table WHERE column LIKE '%{$key}%'");
$rows=array();
while($row=mysqli_fetch_assoc($query))
{
  $rows[] = $row; 
}
echo json_encode($rows);

Here you are getting the value of the search parameter using GET, and you have formed a connection with the database hence your search pool will always be hydrated with "relevant results" upon user prompts.

Upvotes: 0

Micah
Micah

Reputation: 1716

Upon further research, I think I need to filter remote suggestions manually, according to this thread on the Github Issues for Typeahead.js:

"So the idea is I guess that the data returned from remote should already be filtered by the remote, so no further filtering is done on that."

https://github.com/twitter/typeahead.js/issues/148

Upvotes: 2

Related Questions