Question

我已经搜索了stackoverflow以及网页，以便了解如何使用我的JSON数据获取jQueryUI自动完成插件，我很茫然。我让它像一个带有本地数据阵列的魅力一样工作。我能够提取值并构建html。

当我不得不从这个来源拉出JSON时，我遇到了一个问题：

/Search/AjaxFindPeopleProperties2

当我输入'ca'来填充自动完成列表时，

？txtSearch = 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>

任何帮助都会很棒......

谢谢！

JSON，jQueryUI自动完成，AJAX - 当数组不是本地时，无法获取数据

0 个答案: