JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<input id="txMedSearch" type="text" style="width:200px;" />
<table id="tblList">
</table>
<script id="PM_tmpl" type="text/x-jquery-tmpl">
<tr>
<td style="width:60%"> <u>${name}</u> <br/>${Group}</td>
<td style="width:100px;"> ${id} </td>
</tr>
</script>
JavaScript
function blep(arr, prop, value) {
return $.grep(arr, function(item) {
return item[prop].indexOf(value) > -1;
});
}
function GetMeds() {
var x = $("#txMedSearch");
var a = [
{
"id": "13532811000001109",
"name": "Dabigatran etexilate 110mg capsules",
"Group": "High Risk",
"VPID": 13532811000001109},
{
"id": "13532911000001104",
"name": "Dabigatran etexilate 75mg capsules",
"Group": "High Risk",
"VPID": 13532911000001104},
{
"id": "13532811000001109",
"name": "Pradaxa 110mg capsules (Boehringer Ingelheim Ltd)",
"Group": "High Risk",
"VPID": 13532811000001109,
"APID": 13505411000001109},
{
"id": "13532911000001104",
"name": "Pradaxa 75mg capsules (Boehringer Ingelheim Ltd)",
"Group": "High Risk",
"VPID": 13532911000001104,
"APID": 13504711000001102}
];
$('#txMedSearch').live("keyup", function() {
$("#tblList").empty();
$('#PM_tmpl').tmpl(blep(a, 'name', $(this).val())).appendTo("#tblList");
});
}
$(function() {
$("#txMedSearch").live("keyup", function() {
GetMeds();
});
});