javascript - 始终在 Bootstrap 中预先输入的列表中显示链接

标签 javascript html twitter-bootstrap

这是我在这里找到的代码 http://www.w3resource.com/twitter-bootstrap/typehead.php

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />  
    <title>Bootstrap typehead example by w3resource</title>  
    <link href="http://www.w3resource.com/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />  
</head>  
<body>  
<div class="well">  
<input type="text" class="span3" style="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source='["Ahmedabad","Akola","Asansol","Aurangabad","Bangaluru","Baroda","Belgaon","Berhumpur","Calicut","Chennai","Chapra","Cherapunji"]'>  
</div>  
<script src="http://www.w3resource.com/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/jquery.js"></script>  
<script src="http://www.w3resource.com/twitter-bootstrap/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/js/bootstrap-typeahead.js"></script>  
</body>  
</html> ​

它正在工作,但我想在其中添加一个小功能。我想在列表中创建一个链接,该链接始终显示在列表底部。因此,如果您输入某些内容,则会过滤列表,但底部的链接始终会显示。

最佳答案

这个想法只是扩展 typehead 原型(prototype)来重新定义其渲染方法:

var uber = {render: $.fn.typeahead.Constructor.prototype.render};
$.extend($.fn.typeahead.Constructor.prototype, {
    render: function(items) {
        uber.render.call(this, items);
        this.$menu.append('<li class="nostyle"><a href="#" onclick="alert(123)">some link</a></li>')
        return this;
    }
});​

查看此演示 http://jsfiddle.net/dfsq/8qZd8/2/

关于javascript - 始终在 Bootstrap 中预先输入的列表中显示链接,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13026585/

相关文章:

javascript - 匹配九个数字和最后一个大写字母的正则表达式

html - 过渡动画期间移动的文本

javascript - Bootstrap 3 下拉过渡

css - Rails 4 + bower-rails gem + bower + bootstrap sass

javascript - 使用云代码 Swift 保存到 PFUser

javascript - jQuery 如果元素 id 存在,则将类添加到同一元素

javascript - 为什么将数组内容记录到控制台后,javascript 数组对象未定义?

html - 如何截断html中的文本

html - css-grid 在 Firefox 和 Chrome 上呈现不同

javascript - Bootstrap 3 导航栏部分