Skip to main content
 首页 » 编程设计

jquery之使用 typeahead 的标签管理器 jquery 插件

2026年10月07日4shihaiming

我想使用标签管理器(jquery 插件)。 链接:http://welldonethings.com/tags/manager

在网站的示例中,我看到有一个使用预先输入的选项。

这就是我所做的:

HTML:

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="plugins/tagmanager/typeahead.js"></script> 
<script type="text/javascript" src="plugins/tagmanager/bootstrap-tagmanager.js"></script> 
<link rel="stylesheet" href="plugins/tagmanager/bootstrap-tagmanager.css" rel="stylesheet"> 
 
<input type='text' class="input" data-provide="typeahead" name='tagsInput' id='tagsInput' value='' /> 

JavaScript:

$("#tagsInput").tagsManager({ 
        deleteTagsOnBackspace: false, 
        prefilled: ["Pisa", "Rome"], 
        typeahead: true, 
        typeaheadAjaxSource: null, 
        typeaheadSource: ["Pisa", "Rome", "Milan", "Florence", "New York", "Paris", "Berlin", "London", "Madrid"], 
        blinkBGColor_1: '#FFFF9C', 
        blinkBGColor_2: '#CDE69C', 
        hiddenTagListName: 'hiddenTagListA' 
}); 

我在 bootstrap-tagmanager.js:62 上收到此错误:

Uncaught TypeError: Cannot read property 'prototype' of undefined

我做错了什么?

如果我删除 typeahead.js 的包含,标签管理器插件可以正常工作,但没有 typeahead 选项。

示例:http://jsfiddle.net/F8C8c/

或: 也许您可以向我推荐一个更好的标签管理器插件,可以使用通过ajax加载的自动编译标签?

编辑: 我发现了问题。 我应该需要包含 bootstrap.js 而不是 typeahead.js。

请您参考如下方法:

问题是您使用了错误的“typeahead.js”模块。

您需要 bootstrap-typeahead.js。

在这里查找:

https://raw.github.com/tcrosen/twitter-bootstrap-typeahead/master/js/bootstrap-typeahead.js