JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<div data-role="fieldcontain">
<label for="pur_cat">
Category
</label>
<div data-role="fieldcontain">
<div class="ui-widget"> <!--this is for jquery auton complete-->
<input name="" id="pur_cat_text" placeholder="Search Category" value="" type="search" onClick="Get_All_Category()">
</div>
<a id="add_cat" data-role="button" data-inline="true" data-transition="slidefade" onClick="Call_Add_Category()" data-theme="b" >Add New</a>
</div>
</div>
CSS
<link rel="stylesheet" href="/resources/demos/style.css" />
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
JavaScript
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC"
];
$(function () {
$("#pur_cat_text").autocomplete({
source: availableTags
});
});
// FOR Dynamic value
function All_Category_QuerySuccess(tx, results) {
console.log("Returned rows = " + results.rows.length);
var cat_array = []; // init array
//this will return user_id if user exist else return "no user"
if (!results.rowsAffected) {
console.log('No rows affected!');
var htmlStr = "";
for (var index = 0; index < results.rows.length; index++) {
var item = results.rows.item(index);
var cat_id = item.cat_id;
var cat_name = item.cat_name;
cat_array.push(cat_name) // add value into array
console.log("your array "+ cat_array);
console.log("cat id >> " + cat_id + " cat_name : >> " + cat_name + "from array " + cat_array[index]);
}
// assign drop down
/* var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC"
]*/;
$(function () { $( "#pur_cat_text" ).autocomplete({source: cat_array}); });
}
}