ASP.Net MVC Jquery UI Autocomplete - список не отображается при отладке - PullRequest
Новая
       7

ASP.Net MVC Jquery UI Autocomplete - список не отображается при отладке

1 голос
/ 22 сентября 2010

Я реализовал автозаполнение в моем приложении для почтовых индексов. Я отлаживаю в Firebug и вижу в консоли, что действие выполняется, и я получаю список почтовых индексов в списке результатов, но фактический список не отображается при отладке.

Вот действие в моем контроллере Customers: 

//the autocomplete request sends a parameter 'term' that contains the filter
public ActionResult FindZipCode(string term)
{
    string[] zipCodes = customerRepository.FindFilteredZipCodes(term);

    //return raw text, one result on each line
    return Content(string.Join("\n", zipCodes));
}

Вот разметка (сокращенно) 

<% using (Html.BeginForm("Create", "Customers")) {%>
<input type="text" value="" name="ZipCodeID" id="ZipCodeID" />
<% } %>

и вот порядок загрузки моих скриптов: 

<script type="text/javascript" src="/Scripts/jquery-1.4.2.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui.widget.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui.position.js"></script>
<script type="text/javascript" src="/Scripts/jquery.ui.autocomplete.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#ZipCodeID").autocomplete({ source: '<%= Url.Action("FindZipCode", "Customers") %>'});
    });
</script>

Что-нибудь очевидно, что я скучаю? Как я уже сказал, сценарий захватывает список почтовых индексов, они просто не будут отображаться на моей странице при тестировании.

РЕДАКТИРОВАТЬ: я добавил изображение, которое показывает то, что я вижу в firebug - кажется, что я получаю обратно свои почтовые индексы, но просто не отображать выпадающий список

image

I also updated my text box so that it's inside of the ui-widget div like so:

и это скрипт, который я использую: 

<script type="text/javascript">
    $(document).ready(function() {
        $("#ZipCodeID").autocomplete('<%= Url.Action("FindZipCode", "Customers") %>');
    });
</script>

Ответы [ 3 ]

6 голосов
/ 28 сентября 2010

Мне удалось получить предложения автозаполнения, работающие с использованием следующего кода:

Контроллер: 

public JsonResult FindZipCode(string term)
    {
        VetClinicDataContext db = new VetClinicDataContext();

        var zipCodes = from c in db.ZipCodes
                       where c.ZipCodeNum.ToString().StartsWith(term)
                       select new { value = c.ZipCodeID, label = c.ZipCodeNum};

        return this.Json(zipCodes, JsonRequestBehavior.AllowGet);
    }

Разметка: 

<script type="text/javascript">
    $(document).ready(function() {
        $("#ZipCodeID").autocomplete({
                  source: '<%= Url.Action("FindZipCode", "Customers") %>',
        });
    });
</script>

<div class="ui-widget"><input type="text" name="ZipCodeID" id="ZipCodeID" /></div>
2 голосов
/ 24 сентября 2010

Попробуйте вернуть JSON из действия вашего контроллера: 

public ActionResult FindZipCode(string term)
{
    string[] zipCodes = customerRepository.FindFilteredZipCodes(term);
    return Json(new { suggestions = zipCodes }, JsonRequestBehavior.AllowGet);
}

Также не забудьте включить CSS по умолчанию, иначе вы не увидите появления div div.

2 голосов
/ 22 сентября 2010

У меня были огромные проблемы с автозаполнением несколько месяцев назад при первой настройке.Например, простая связка по умолчанию, как вы делаете, у меня никогда не работала.Мне пришлось все указать, а также прикрепить к нему функцию результата.

Это работает на 100%, но может не подойти для вас.Но я надеюсь, что это поможет.Поместите оба в функцию document.ready (). 

$("#products").autocomplete('<%:Url.Action("GetProducts", "Product") %>', {
    dataType: 'json',
    parse: function (data) {
        var rows = new Array(data.length), j;
        for (j = 0; j < data.length; j++) {
            rows[j] = { data: data[j], value: data[j].Title, result: data[j].Title };

        }
        return rows;
    },
    formatItem: function (row, y, n) {
        return row.PrettyId + ' - ' + row.Title + ' (' + row.Price + ' €)';
    },
    width: 820,
    minChars: 0,
    max: 0,
    delay: 50,
    cacheLength: 10,
    selectFirst: true,
    selectOnly: true,
    mustMatch: true,
    resultsClass: "autocompleteResults"
});
$("#products").result(function (event, data, formatted) {
    if (data) {

        var item = $("#item_" + data.PrettyId),
                    edititem = $("#edititem_" + data.PrettyId),
                    currentQuantity;
        // etc...
    }
});
...