【问题标题】:always show link in list from typeahead from bootstrap始终在引导程序中预先输入的列表中显示链接
【发布时间】:2012-10-23 17:44:13
【问题描述】:

这是我在这里找到的代码 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> ​

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

【问题讨论】:

  • 请设置一个小提琴,以便我们可以使用它。
  • 我无法让它在 jsfiddle 中工作,但如果您将代码保存在本地,它就可以工作。这是jsfiddle:jsfiddle.net/chanckjh/8qZd8

标签: javascript html twitter-bootstrap


【解决方案1】:

这个想法只是扩展typehead原型来重新定义它的渲染方法:

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/

【讨论】:

  • 谢谢。在我自己的代码中进行了一些微调后,我让它工作了。
猜你喜欢
  • 1970-01-01
  • 2013-08-21
  • 1970-01-01
  • 1970-01-01
  • 2017-07-31
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-01-14
相关资源
最近更新 更多