Как реализовать автозаполнение текстового поля, используя asp.net mvc, javascript, cache, ajax

Question

Мне нужно реализовать автозаполнение текстового поля, получение значений из базы данных (сервера) с использованием Asp.Net MVC3, с использованием javascript, а не jQuery. Поэтому, пожалуйста, попробуйте помочь мне с источником.

Я использую ASP.Net MVC3.

Answer 1

Для этого есть автозаполнение jquery.http://docs.jquery.com/Plugins/Autocomplete Вам нужно просто написать код jquery.Предположим, это текстовое поле на странице просмотра.

написать jquery для этого текстового поля.

$(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
                    });

// $ ("# Автозаполнение"). Select ();});

            }
        });
    });

Это вызовет метод действия с использованием ajax, и этот метод действия вернет список для отображения.здесь get title - это метод действия.код действия контроллера

     [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;
    }

Этот код поможет вам спросить меня, есть ли у вас проба

Answer 2

В представлении: -

<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: ""
                }
            });

})

В контроллере: -

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);
        }