Autocomplete TwitterBootstrap3.0Typeahead ajax示例

对于bootstrap 2，有很多typeahead ajax示例，例如这里的示例

然而，我使用的是Bootstrap3，我找不到一个完整的例子，取而代之的是一堆不完整的信息片段，带有指向其他网站的链接，例如这里

---

如果每次用户更改输入时都通过ajax从服务器加载数据，请有人发布一个关于如何使用typeahead和bootstrap 3的完整工作示例。

在这里您可以找到有关如何升级到v3的信息：

---

这里也有一些例子：

这是我一步一步的体验，灵感来自我们正在开发的Scala/PlayFramework应用程序

在脚本中，我有：

$->
学习者=新猎犬(
datumTokenizer:Bloodhound.tokenizers.obj.whitespace（“值”）
queryTokenizer:猎犬。标记。空白
远程：“/learner/namelike？nameLikeStr=%QUERY”
)
初始化（）
$（“#firstName”）.typeahead
最小长度：3
提示：正确
推荐理由：没错
,
名称：“学习者”
显示键：“值”
来源：learners.ttAdapter（）

我在页面上包括了typeahead包和我的脚本，在我的输入字段周围有一个

div

，如下所示：

结果是，对于输入字段中第一个minLength（3）字符之后键入的每个字符，页面将发出一个GET请求，URL看起来像

/learner/namelike？nameLikeStr=

加上当前键入的字符。服务器代码返回包含字段“id”和“value”的json对象数组，例如：

[{
“id”：“109”，
“价值”：“格雷厄姆·琼斯”
},
{
“id”：“5833”，
“价值”：“希西家琼斯”
} ]

对于播放，我需要路由文件中的某些内容：

GET/learner/namelike控制器.learner.namelike（nameLikeStr:String）

最后，我在一个新的typeahead.css文件中为下拉列表等设置了一些样式，该文件包含在页面的

（或accessible.css）中

.tt下拉菜单{
宽度：252px；
边缘顶部：12px；
填充：8px0；
背景色：#fff；
边框：1px实心#ccc；
边框：1px实心rgba（0,0,0,0.2）；
-webkit边界半径：8px；
-moz边界半径：8px；
边界半径：8px；
-webkit盒阴影：0 5px 10px rgba（0,0,0,2）；
-moz盒阴影：0 5px 10px rgba（0,0,0,2）；
盒影：0 5px 10px rgba（0,0,0,2）；
}
.提前打印{
背景色：#fff；
}
.typeahead:聚焦{
边框：2px实心#0097cf；
}
.tt查询{
-webkit盒阴影：插入0 1px 1px rgba（0,0,0,0.075）；
-moz盒阴影：插入0 1px 1px rgba（0,0,0,0.075）；
盒影：插入0 1px 1px rgba（0,0,0,0.075）；
}
.tt提示{
颜色：#999
}
.tt建议{
填充：3px20px；
字号：18px；
线高：24px；
}
.tt-suggestion.tt-cursor{
颜色：#fff；
背景色：#0097cf；
}
.tt建议p{
保证金：0；
}

使用bootstrap3 typeahead，我可以使用以下代码：

jQuery（文档）.ready（函数（）{
$（“#提前输入”）。提前输入({
来源：功能（查询、流程）{
返回$.get（'search？q='+查询，函数（数据）{
返回过程（数据、搜索结果）；
});
}
});
})

后端在

search

GET端点下提供搜索服务，接收

q

参数中的查询，并返回格式为

{'search\u results'：['resultA'，'resultB'，…]}

的JSON。

search\u results

数组的元素显示在typeahead输入中。

我正在使用这个

使用Codeigniter/PHP的代码结果

$（“#produto”）。提前键入({
onSelect：功能（项目）{
控制台日志（项目）；
获取产品信息（项目）；
},
阿贾克斯：{
url:path+'produto/getProdName/'，
超时：500，
显示字段：“concat”，
valueField:“idproduto”，
触发器长度：1，
方法：“张贴”，
数据类型：“JSON”，
preDispatch：函数（查询）{
显示加载掩码（真）；
返回{
搜索：查询
}
},
预处理：函数（数据）{
如果（data.success==false）{
返回false；
}否则{
返回数据；
}                
}               
}
});

var数据=[“Aamir”、“Amol”、“Ayesh”、“Sameera”、“Sumera”、“Kajol”、“Kamal”，
“阿卡什”、“罗宾”、“罗山”、“雅利安人”]；
$（函数（）{
$（“#提前输入”）。提前输入({
来源：功能（查询、流程）{
过程（数据）；
});
}
});
});

此示例适用于Bootstrap 3@Baghoo，我正在寻找一个通过Ajax远程获取数据的示例。升级是什么意思？你可以在这里输入一个有效的例子吗？我的意思是如果你有bootstrap2的工作类型，你可以使用这个信息升级。第二个链接可能对您更有帮助？该链接已失效，请在答案中添加内容，而不是外部链接。您从何处获得样式？没有他们，这是可怕的在我的BS-3项目。有了这些样式，它看起来很棒。@raider33我想我是在查看页面时得到的。我可能不得不稍微调整以适应我的项目风格。这是什么猎犬类？你能不能再给她写一篇文章，然后再写一篇咖啡脚本。我知道我可以转换它，但我认为每个人都可以阅读咖啡，可以阅读普通的javascript，但不能反过来。@PascalKlein Brandhound是一个建议引擎，该代码根据到目前为止键入的内容决定要返回哪些选项。更多的文档在网站上。在里面

<input id="typeahead-input" type="text" data-provide="typeahead" />

<script type="text/javascript">
var data = ["Aamir", "Amol", "Ayesh", "Sameera", "Sumera", "Kajol", "Kamal",
  "Akash", "Robin", "Roshan", "Aryan"];
$(function() {
    $('#typeahead-input').typeahead({
        source: function (query, process) {
               process(data);
            });
        }
    });
});
</script>