Home/ Questions/Q 8731053
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T09:08:46+00:00

this is a code I found here http://www.w3resource.com/twitter-bootstrap/typehead.php <!DOCTYPE html> <html> <head> <meta charset=utf-8

  • 0

this is a code I found here 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> ​

It’s working but I want to add a small feature in it. I want to create a link in the list that will always show up at the bottom of the list. So if you type something if will filter the list but a link in the bottom will always show up.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    The idea is just to extend typehead prototype to redefine its render method:

    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;
    }
});​

    See this demo http://jsfiddle.net/dfsq/8qZd8/2/

    • 0