This project is read-only.
1
Vote

Cannot make AzureSearchSuggestionsDemo to work

description

No, Azure stuff works perfectly - the issue is in UI. To be more precise in Bloodhound/typeahead. The first problem I was able to fix. This line

__ remote: '/home/suggest?q=%QUERY&type=name&fuzzy=false'

in Index.cshtml caused problem by passing %QUERY as a value of "q" parameter. The fix is this:
                remote: {
                    url: '/home/suggest?q=%QUERY&type=name&fuzzy=true',
                    wildcard: '%QUERY'
                }
The second issue is: it doesn't display anything even though the service and C# layer do return a valid array of objects. I checked it in Fiddler - looks perfect. So, I added into typeahead call notFound property:
                                    templates:
                                        {
                                            notFound: "<div>No suggestions</div>",
                                            suggestion:
                                                Handlebars.compile('<p><img src="{{thumbnail}}" style="height:40px;width:60px;">&nbsp;<strong>{{name}}</strong>&nbsp;-&nbsp;{{species}}</p>')
                                        }
And it is exactly what happens: notFound is triggered every time even though there is a valid result set like this:

[
{"id":null,"value":"Zucchini / Courgette","name":"Zucchini / Courgette","species":"Cucurbita pepo","thumbnail":"images/gourds.png"},
{"id":null,"value":"Cucumis sativus","name":"Cucumber","species":"Cucumis sativus","thumbnail":"images/gourds.png"},
{"id":null,"value":"Mucuna pruriens","name":"Velvet bean","species":"Mucuna pruriens","thumbnail":"images/podded.png"},
{"id":null,"value":"Nelumbo nucifera","name":"Lotus root","species":"Nelumbo nucifera","thumbnail":"images/bulb.png"},
{"id":null,"value":"Cucurbita","name":"Pumpkin","species":"Cucurbita","thumbnail":"images/gourds.png"}
]

comments

vadim22 wrote May 5, 2015 at 3:19 PM

OK, adding to the previous - here's a solution:
replace reference to the typeahead script with a concrete version:

<script src="http://twitter.github.io/typeahead.js/releases/0.10.5/typeahead.bundle.js"></script>

After download it is
<script src="http://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js"></script>

As I guessed from the beginning typeahead introduced breaking changes into this demo app.