Javascript 追加到div后我的jquery自动完成无法选择

我使用from jquery autocomplete，并将数据附加到一个div中进行自定义，我的数据将显示在div中，但这些是不可选择的，我想选择我的理想项：

这是我的代码： html代码

<script src="../Scripts/jquery-1.10.0.min.js"></script>
<script src="../Scripts/jquery-1.10.2.js"></script>
<script src="../Scripts/jquery-ui.min.js"></script>
<link href="../Style/ucStyleSheet.css" rel="stylesheet" />
<link href="../Style/jquery-ui.css" rel="stylesheet" />
<div id="divMain">
    <div id="divFind">
        <asp:TextBox runat="server" ID="txtSearch" CssClass="textBox" autocomplete="false" >        
        </asp:TextBox>
        <div id="divFindResult" class="ui-widget results">
            <div id="divLines" class="ui-widget-content results">
                <table>
                    <tr>
                        <td colspan="2">
                            <ul id="ulLines"></ul>
                        </td>
                    </tr>
                </table>
            </div>
            <div id="divBusStops" class="ui-widget-content">
                <table>
                    <tr>
                        <td colspan="2">
                            <ul id="ulBusStops"></ul>
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <asp:HiddenField ID="hfItem" runat="server" />
    </div>
</div>

js代码：

---

我在我的div中看到了结果，但这些结果是不可选择的，任何人都可以帮助我？？？

如果您找到了任何解决方案，请发布它。我也面临着同样的问题。嗨，亲爱的@chanchalpardeshi，我通过使用css类找到了这个问题的答案。当鼠标滑过时，你可以为项目设置一个类。通过jquery选择器更改类，但我不记得细节bcz这个问题是两年前出现的祝你好运！确保已正确导入样式表tanx alot@ruth young

  $(document).ready(function () {
        var thing = $('#<%=txtSearch.ClientID%>').autocomplete({
            source: function (request, response) {
                $.ajax({
                    type: "POST",
                    url: "/Services/BusWebService.asmx/GetRouteInfo",
                    data: "{ 'param': '" + request.term + "' }",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    dataFilter: function (data) { return data; },
                    success: function (data) {
                        response($.map(data.d, function (item) {
                            return {
                                itemid: item.split(',')[0],
                                itemtype: item.split(',')[1],
                                label: item.split(',')[2]
                            }
                        }))
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(textStatus);
                    }
                });
            },
            minLength: 2,
            select: function (event, ui) {
                $('#<%=hfItem.ClientID%>').val(ui.item.itemid + ',' + ui.item.itemtype + ',' + ui.item.label);
                //$("form").submit();
            },
            search: function (event, ui) {
                $("#ulBusStops").empty();
                $("#ulLines").empty();
            },
            open: function (event, ui) {
                $("#divFindResult").css("display", "block");
            },
            close: function (event, ui) {
                $("#divFindResult").css("display", "none");
                $("#ulBusStops").empty();
                $("#ulLines").empty();

            }
        });
        thing.data("autocomplete")._renderItem = function (ul, item) {
            if (item.itemtype == 1) {
                return $("<li></li>")
                    .data("item.autocomplete", item)
                    .append("<a class='results'><img src='../images/line_icon.png' height='16' width='16'>" + " " + item.label + "</a>")
                .appendTo($('#ulLines'));

            } else {
                return $("<li></li>")
                   .data("item.autocomplete", item)
                   .append("<a class='results'><img src='../images/bus_icon.png' height='16' width='16'>" + " " + item.label + "</a>")
                .appendTo($('#ulBusStops'));
            }
        };
    });