<script type="textjavascript"><link rel="stylesheet"href="//code.jquery.com/ui/1.12.1/themes/base/jqueryui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
function changeSourceType(obj) {
debugger;
var sourceData = [];
var sourcetype = document.getElementById("ddlSourceType" + obj).value;
$("#txtSource" + obj).autocomplete({
source: function (request, response) {
$.ajax({
url: '/Layout/FillSource',
type: "GET",
dataType: "JSON",
data: { sourcetype: sourcetype },
success: function(data) {
var array = $.map(data, function(item) {
return {
label: item.Name,
value: item.Name
};
});
//call the filter here
response($.ui.autocomplete.filter(array, request.term));
}
});
},
minLength: 0,
focus: function (event, ui) {
$("#txtSource" + obj).val(ui.item.label);
}
});
}
</script>
<div class="col-md-3">
<label class="" for="form-first-name">Source Type</label>
<div class="clearfix">
<select id="ddlSourceType" class="form-control" onchange="changeSourceType()">
<option value="0">Select</option>
<option value="1">Content</option>
<option value="2">Folder</option>
<option value="3">Taxonomy</option>
</select>
</div>
</div>
<div class="col-md-3">
<label class="" for="form-first-name">Select Source</label>
<div class="clearfix">
<input type="text" id="txtSource1" class="form-control">
</div>
</div>
AutoComplete Link -: https://jqueryui.com/autocomplete/
No comments:
Post a Comment