Thanks to the wonderful suggestions listed on SO I was able to hack out a type ahead that will update a table when selected. The last step I need to do is clear the textbox on/during/after the selection. I have tried adding things to the table onchange event, intercepting the select event, etc. nothing seems to work. The only other reference I can find here for this does not have an answer. There are responses for autocomplete but I cant seem to adapt them either. Any help would be greatly appreciated.
$(document).ready(function () {
var ds = [
@if (ViewData.ModelState.IsValid)
{
var index = 0;
foreach (var person in Model)
{
var jaUser = "{ name: \" " + person.UserName + "\", mobi: \"" + person.MobilePhone + "\" }";
if (index > 0) { jaUser = ',' + jaUser; }
@Html.Raw(jaUser)
index++;
}
}
];
var d = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: ds
});
d.initialize();
$('#contactSearch').typeahead(
{
hint: true,
highlight: true,
minLength: 1,
},
{
name: 'd',
displayKey: 'name',
source: d.ttAdapter(),
templates: {
empty: 'not found', //optional
suggestion: function (el) {
return "<span onclick=\"addUser2list('" + el.name + "');\"><img src='" + el.mobi + "' />" + el.name + "</span>"
}
}
}
);
});
function addUser2list(mobnum){
if (mobnum.length > 0){
row = $("<tr></tr>");
col1 = $("<td>col1</td>");
col2 = $("<td>"+ mobnum +"</td>");
col3 = $("<td>col3</td>");
row.append(col1, col2, col3).prependTo("#mytable");
//$('#contactSearch').val('');
}
}
example - you type "da" in the text box, 3 names appear in the drop down, you select 1 and it is prepended to the table above. Once that happens, I need the text box to be clear, currently it shows the name you selected and you have to manually delete it. For some unknown reason the jsfiddle isnt updating the table, but in my local code it works fine, I just need to know how to clear the "contactSearch" box automatically.