Блог

Я искал stackoverflow, а также в Интернете, чтобы получить представление о том, как заставить плагин автозаполнения jQueryUI работать с моими данными JSON, и я в недоумении. У меня это работало как шарм с локальным массивом данных. Я смог извлечь значения и создать html.

Я столкнулся с проблемой, когда мне пришлось извлекать JSON из этого источника:

 /Search/AjaxFindPeopleProperties2 
  

?txtSearch=ca извлекает тестовые данные, которые я пытаюсь просмотреть, когда я ввожу ‘ca’ для заполнения списка автозаполнения. Одна из проблем заключается в том, что ?term=ca добавляется к URL вместо ?txtSearch=ca, и я не уверен, как его изменить.

Это пример данных:

 {

"MatchedProperties": [
    {
        "Id": 201,
        "Name": "Carlyle Center",
        "Description": "Comfort, convenience and style are just a few of the features you'll ...",
        "ImageUrl": "/Photos/n/225/4989/PU__ThumbnailRS.jpg"
    }

 ]

}
  

… и вот вызов ajax, который я пытаюсь реализовать:

 $(document).ready(function () {


    val = $("#txtSearch").val();

    $.ajax({

        type: "POST",
        url: "/Search/AjaxFindPeopleProperties2",
        dataType: "json",
        data: "{}",
        contentType: "application/json; charset=utf-8",

        success: function (data) {
            $('#txtSearch').autocomplete({
                minLength: 0,
                source: data.d, //not sure what this is or if it's correct
                focus: function (event, ui) {
                    $('#txtSearch').val(ui.item.MatchedProperties.Name);

                        $.widget("custom.catcomplete", $.ui.autocomplete, {

                            //customize menu item html here
                            _renderItem: function (ul, item) {
                                return $("<li class='suggested-search-item"   " "   currentCategory   "'></li>")
                            .data("item.autocomplete", item)
                            .append($("<a><img src='"   item.MatchedProperties.ImageUrl   "' /><span class='name'>"   item.MatchedProperties.Name   "</span><span class='location'>"   "item.location"   "</span><span class='description'>"   item.MatchedProperties.Description   "</span></a>"))
                            .appendTo(ul);
                            },

                            _renderMenu: function (ul, items) {
                                var self = this,
                                currentCategory = "Properties Static Test Category";
                                $.each(items, function (index, item) {
                                    if (item.category != currentCategory) {
                                        ul.append("<li class='suggested-search-category ui-autocomplete-category'>"   currentCategory   "</li>");
                                        //currentCategory = item.category;
                                    }
                                    self._renderItem(ul, item);
                                });
                            }

                        }//END: widget
                    //return false;
                },
                select: function (event, ui) {
                    $('#txtSearch').val(ui.item.MatchedProperties.Name);
                    //$('#selectedValue').text("Selected value:"   ui.item.Abbreviation);
                    return false;
                }
            });
        },

        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(textStatus);
        }

    }); //END ajax





}); //END: doc ready
  

и я инициализирую здесь:

 <script type="text/javascript">

    //initialize autocomplete
$("#txtSearch").autocomplete({ //autocomplete with category support
        /*basic settings*/
        delay: 0,
        source: "/Search/AjaxFindPeopleProperties2",
        autoFocus: true,
        minLength: 2 //can adjust this to determine how many characters need to be entered before autocomplete will kick in
    });
//set auto fucus
    $("#txtSearch").autocomplete("option", "autoFocus", true);


</script>
  

любая помощь была бы отличной…

Спасибо!