jquery自动完成，结果在div中答案

【问题标题】：jquery autocomplete with results in divjquery自动完成，结果在div中
【发布时间】：2014-01-19 17:26:58
【问题描述】：

这是我第一次尝试使用 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 自动完成功能读取。任何帮助将不胜感激

【问题讨论】：

标签： jquery ajax json autocomplete

【解决方案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
}

【讨论】：