使用Web表单的Jquery UI自动完成

时间:2013-05-02 15:37:38

标签: jquery asp.net jquery-ui jquery-autocomplete

我在asp.net网络表单中使用jquery ui autocomplete,搜索图像存储库,生成带有imagethumb和title的列表。

<script type="text/javascript">
    $(document).ready(function () {
        SearchText();
    });
    function SearchText() {
        $(".autosuggest").autocomplete({
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "service.asmx/Search",
                    data: "{'searchtext':'" + document.getElementById('txtSearch').value + "'}",
                    dataType: "json",
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                pageno: item.PageNo,
                                ImageUrl: item.ImageUrl
                            };
                        }));

                    },
                    error: function (result) {
                        alert("Error");
                    }
                });
            },
            focus: function( event, ui ) {
                $("ul li a").value;
                  return false;
           },
        }).data('autocomplete')._renderItem = function (ul, item) {
            return $('<li>')
            .data('item.autocomplete', item)
            .append("<a><img src='" + item.ImageUrl + "' />" + item.pageno + "</a>")
            .appendTo(ul);
        };
    }
</script>

HTML

     <div>
    Search:
    <input type="text" id="txtSearch" class="autosuggest" />
     </div>

它工作正常,但是当我选择一个项目时,它不会填写文本框。我哪里错了?任何帮助赞赏。

1 个答案:

答案 0 :(得分:1)

为自动完成编写选择事件

select: function(event, ui) {
        alert(ui.item.value);
    }