Autocomplete combobox using Jquery, webservice and entityFramework
This plugin has been made with intention of a reusable component.
In this code-snippet we will see how to create a auto-complete type of combobox. Which fills the combobox from database by calling Web Service . Web service makes use of entity framework to fetch the data from database.
It is very light weight ..and fetches data too quickly from million of records.
Introduction
In this code-snippet we will try to get hands-on with JQuery to demostrate Autocomplete Combobox with the help of WebServices and Entity framework.Description
In this code-snippet we will see how to create a auto-complete type of combobox. Which fills the combobox from database by calling Web Service . Web service makes use of entity framework to fetch the data from database.
<html>
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" type="text/css" href="https://5bd43a8b85d977468b795ebb1cefd89e46ea7adb.googledrive.com/host/0B8sSQit1nMHNQUxrVnpfNWRXcUE/technologymantracombo.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://5bd43a8b85d977468b795ebb1cefd89e46ea7adb.googledrive.com/host/0B8sSQit1nMHNQUxrVnpfNWRXcUE/technologymantracombo.js"></script>
<script type="text/javascript">
function fill() {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "WebService2.asmx/getStudents",
data: '{}',
dataType: "json",
success: function (Result) {
var jsdata = JSON.parse(Result.d);
// alert(jsdata);
// var jsdata = Result.d;
$.each(jsdata, function (key, value) {
$('#MySelect').append($("").val(value.id).html(value.name));
});
$("#MySelect").combify(); // this method converts drop down to combo-box and enables auto search
},
error: function (Result) {
alert("Error");
}
});
}
</script>
Auto complete combobox
<script type="text/javascript">
$(document).ready(function () {
fill();
});
</script>
</body>
</html>
Web service method, is uses entity framework to get list of student names from DB and return a Json serialized string :
[WebMethod]
public string getStudents()
{
CoreEntities _Contex = new CoreEntities();
var list = (from m in _Contex.tblStudentInfoes where m.int_Status == 1 select new { id = m.int_Student_Id, name = m.str_Last_Name }).ToList();
return (new JavaScriptSerializer().Serialize(list));
}