I need implement Auto complete text box,values getting from database (Server) using Asp.Net MVC3, using javascript not with jQuery. So please try help me with source.
I am using ASP.Net MVC3.
For this there is jquery autocomplete is there. http://docs.jquery.com/Plugins/Autocomplete what you need to do is just write a jquery code. suppose this is the text box in your view page.
< input type="text" id="AutoComplete" value="" />
write a jquery for this textbox.
$(document).ready(function () {
$("#AutoComplete").keypress(function () {
var title = $("#AutoComplete").val();
var availableTags = [];
if (title.length == 3) {
$.get("/Wk/GetTitle/" + title, function (data) {
var arr = jQuery.makeArray(data.split(','));
for (var i = 0; i < arr.length; i++) {
availableTags.push(arr[i]);
}
$("#AutoComplete").autocomplete({
source: availableTags
});
// $("#AutoComplete").select(); });
}
});
});
This will call action method using ajax and this action method return the list to show. here get title is the action method. the controller action code is
[HttpGet]
public StringBuilder GetTitle(string inputString)
{
StringBuilder sb = new StringBuilder();
List<string> title = new List<string>();
int i = 0;
string slug = RouteData.Values.Values.ElementAt(2).ToString();
title = pageBL.GetTitleAutocomplete(slug);
for (i = 0; i <= title.Count - 1; i++)
{
if (i != title.Count -1 )
sb = sb.Append(title.ElementAt(i) + ",");
else
sb = sb.Append(title.ElementAt(i) );
}
return sb;
}
This code will help you ask me if you get any prob
In View:-
<input type="text" id="txtRemark" name="txtRemark" class="form-control" placeholder="Remark">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(document).ready(function () {
$("#txtRemark").autocomplete({
source: function (request, response) {
$.ajax({
url: "/ControllerName/AutoCompleteRemark",
type: "POST",
dataType: "json",
data: { remark: request.term },
success: function (data) {
response($.map(data, function (item) {
return { label: item.VCEHRemark, value: item.VCEHRemark };
}))
}
})
},
messages: {
noResults: "", results: ""
}
});
})
In Controller:-
public JsonResult AutoCompleteRemark(string remark)
{
var result = db.tablename.Where(p => p.VCEHRemark.Contains(remark)).Select(p => new { p.VCEHRemark });
return Json(result, JsonRequestBehavior.AllowGet);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.