我使用jquery自动完成,并将数据附加到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 code:
$(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'));
}
};
});
我在div中看到了结果,但这些都不可选,任何人都可以帮助我?