Question

这是我第一次尝试使用jQuery Auto Complete并且我已经开始工作了但是我的工作就是稍微编辑它但发现它有点困难。

我要做的是使用自动完成功能，使用输入到输入字段的产品代码搜索产品数据库。然后有一个div，它将显示匹配的产品名称作为结果。目前我有标准自动完成，其中显示输入框下方的结果，这不是我想要的。

然后棘手的部分是留下输入框中输入的产品代码，只在结果div中显示产品名称。然后我可以用它来完成我的添加到购物车表格。

以下是我到目前为止的代码：

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>


<script type="text/javascript" language="javascript"> 
$(function() {
    $( "#username" ).autocomplete({
        source: "source.asp",
        minLength: 5
});
});
</script>


<input type="text" id="username">

source.asp文件生成如下数据链接：

[{"id":"product ID","value":"Product Name"}]

然后由jQuery自动完成功能读取。任何帮助将不胜感激

Answer 1

创建包装器div

$( "#username" ).data( "ui-autocomplete" )._renderMenu=function(){
    // Create your div here
}

在该div中呈现单个项目

$( "#username" ).data( "ui-autocomplete" )._renderItem=function(){
    // render your items here, skip it if it creates undesired result
}

jquery自动完成，结果为div

1 个答案: