CODEWITHSUNDEEP
javascriptlaravellaravel-5handlebars.jstypeahead.js
James
James

Reputation: 16339

Typeahead suggestions with text below each suggestion

I am working on a project where users have characters.

I am creating a search function for these characters where the user types in the characters name and can then search for matching records.

I'm using typeahead in the input box and am currently bringing back character names and their username.

I am wanting to display this in the suggestions list with the character name appearing as it normally would, and then the username below it as slightly smaller text. Something like this:

Suggestion with username on second line

To do this I have tried the following

<script type="text/javascript">
    $(document).ready(function() {

        var characters = new Bloodhound({
            remote: {
                url: '/search/characters/find?q=%QUERY%',
                wildcard: '%QUERY%'
            },
            datumTokenizer: Bloodhound.tokenizers.whitespace('q'),
            queryTokenizer: Bloodhound.tokenizers.whitespace
        });

        $("#searchinput").typeahead({
            hint: true,
            highlight: true,
            minLength: 1
        },
        {
            source: characters.ttAdapter(),
            templates: {
                suggestion: Handlebars.compile('<p>@{{ concatname }}</p><p><small>@{{ username }}</small></p>')
            }
        });
    });
</script>

However this only shows the character name in the suggestion.

To test the data was coming in correctly, I tried this and it worked (character name then a hyphen and then the username):

suggestion: Handlebars.compile('<p>@{{ concatname }} - @{{ username }}</p>')

An example of the data returned is below:

[  
   {  
      concatname:"Great Work",
      username:"manager"
   },
   {  
      concatname:"Scrim Greaves",
      username:"glees"
   }
]

How can I get the username to appear correctly below the character name?

Note the @{{ }} syntax is necessary as I use Laravel and the @ symbol escapes the double curly brace, which is then rendered as {{ }}.

Upvotes: 1

Views: 289

Answers (2)

Mohamed Akram
Mohamed Akram

Reputation: 2117

Please check the following website, there is a memeber search bar and Iam using typeahead with Laravel, and also I am using it in the registration page..

Click here

Upvotes: 0

Will Reese
Will Reese

Reputation: 2841

I think the problem you are having is that you don't have a wrapper around your to <p> elements. The template should have one element containing everything and is most likely trimming the second <p>.

Change your template code:

templates: {
  suggestion: Handlebars.compile('<div><p>@{{ concatname }}</p><p><small>@{{ username }}</small></p></div>')
}

Upvotes: 1

Related Questions