Autocomplete Box using Jquery Ajax and Web API in MVC 4

1. Add Model Class

Add Model Class

2. Modify on WebApiConfig

WebApiConfig

3. Add a controller and set the method to return string

public class BooksController: ApiController {
// LIST OBJECT WILL HOLD AND RETURN A LIST OF BOOKS.
List < ClassModel > MyBooks = new List < ClassModel > ();
// RETURN A LIST OF BOOKS MATCHING WITH THE REQUESTED ALPHANUMERIC VALUE(S).
public IEnumerable < ClassModel > Get(string sLookUpString) {
GetTheBooks(sLookUpString);
return MyBooks;
}
public void GetTheBooks(string sFind) {
string sConnString = "";
SqlConnection myConn = new SqlConnection(sConnString);
// SEARCH DATABASE TABLE MATCHING BOOKS WITH THE "LOOKUP" STRING.
SqlCommand objComm = new SqlCommand("SELECT * FROM dbo.studentmaster where StdName like '" + sFind + "%' order by StdName desc ", myConn);
myConn.Open();
// objComm.Parameters.AddWithValue("@LookUP", sFind);
SqlDataReader reader = objComm.ExecuteReader();
// ADD EACH BOOKNAME ALONG WITH ITS ID IN THE LIST.
while (reader.Read()) {
MyBooks.Add(new ClassModel {
StdName = reader["StdName"].ToString()
});
}
myConn.Close();
}
}

Add a controller

4. And Finally call in .cshtml Method

< !DOCTYPE html > @using(Html.BeginForm()) { < html > @section Scripts { < script type = "text/javascript" > $(document).ready(function() {
BindControls();
});
function BindControls() {
$("#myBooks").autocomplete({
source: function(request, response) {
var val = request.term;
$.ajax({
url: "/api/Books/" + val,
type: "GET",
success: function(data) {
response($.map(data, function(item) {
return {
value: item.StdName
}
}))
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
},
minLength: 1 // MINIMUM 1 CHARACTER TO START WITH.
});
} < /script>
}

<head>
<title>AutoComplete Example using Asp.Net Web API and JQuery Ajax</title>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css"
rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
</head>
<body style="font-size:80%">
<div style="font:15px Verdana;">
Type a letter:
<input type="text" value="" id="myBooks" />
</div>
</body>undefined</html>

Method

5. Final output is: