CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
joeshmoe
joeshmoe

Reputation: 35

How to style a typeahead in a nav in bootstrap?

My code looks like 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Test</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <style>
    <style type="text/css">
    


/*.tt-query,  UPDATE: newer versions use tt-input instead of tt-query */
.tt-hint {
    width: 396px;
    height: 30px;
    padding: 8px 12px;
    font-size: 24px;
    line-height: 30px;
    border: 2px solid #ccc;
    border-radius: 8px;
    outline: none;
}

/*.tt-query { /* UPDATE: newer versions use tt-input instead of tt-query 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
*/
.tt-hint {
    color: #999;
}

.tt-menu { /* UPDATE: newer versions use tt-menu instead of tt-dropdown-menu */
    width: 422px;
    margin-top: 12px;
    padding: 8px 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
    padding: 3px 20px;
    font-size: 18px;
    line-height: 24px;
}

.tt-suggestion.tt-is-under-cursor { /* UPDATE: newer versions use .tt-suggestion.tt-cursor */
    color: #fff;
    background-color: #0097cf;

}

.tt-suggestion p {
    margin: 0;
}
    </style>
     </head>
  <body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Test</a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li>
            <input id = "pages" class = "typeahead form-controler" type="text" placeholder="abc">
          </li> 
          <li>
            <a href="#">
              <span class="glyphicon glyphicon-search"></span>
            </a>
          </li> 
        </ul>
        
        
      </div>
    </div>
  </nav>
   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/typeahead.bundle.min.js"></script>
    
    <script>
    var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substringRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        matches.push(str);
      }
    });

    cb(matches);
  };
};

var pages = ['abc',' def','ghi'];
/***************************/
/*I'm discussing the following comment*/
/***************************/
/*
$('#pages.typeahead').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
},
{
  name: 'pages',
  source: substringMatcher(pages)
});*/
</script>
</body>
</html>

(note, it doesn't run here due to me not being able to include the bootstrap and typeahead js).

When I leave the last part of the Javascript disabled, the typeahead is styled properly:

(I can't include a picture, see https://i.sstatic.net/OpHTQ.png for a screenshot

On the other hand, when I uncomment the last part of Javascript (to make typeahead work), it's not styled:

See https://i.sstatic.net/XW3yd.png for a screenshot

UPDATE

Removed extra style from the top and changed to $('#pages').typeahead({

Now the screenshot looks like https://i.sstatic.net/isJPh.png

There's a textbox under a textbox. The bottom one is not editable, is styled and the suggestions appear there. The top one is where the typing happens, is not styled and has final text appears there.

Upvotes: 2

Views: 1735

Answers (2)

David
David

Reputation: 7285

The problem is in the css.

You need to play with the default values to adapt them to your style.

Also, for future snippets in SO, keep html, js y css separated. Ensure that everything is working as in your system. When not, ensure that the references to external libraries are correct.

To include bootstrap and typeahead js files use their CDNs.

I leave you a snippet that is working and styling the search box nicely (try it in "full page" mode):

$(document).ready(function() {
  var substringMatcher = function(strs) {
    return function findMatches(q, cb) {
      var matches, substringRegex;

      // an array that will be populated with substring matches
      matches = [];

      // regex used to determine if a string contains the substring `q`
      substrRegex = new RegExp(q, 'i');

      // iterate through the pool of strings and for any string that
      // contains the substring `q`, add it to the `matches` array
      $.each(strs, function(i, str) {
        if (substrRegex.test(str)) {
          matches.push(str);
        }
      });

      cb(matches);
    };
  };

  var pages = ['abb', 'abc', 'acb', 'acc', 'def', 'ghi'];
  /***************************/
  /*I'm discussing the following comment*/
  /***************************/
  
  $('#pages.typeahead').typeahead({
    hint: true,
    highlight: true,
    minLength: 1
  },
  {
    name: 'pages',
    source: substringMatcher(pages)
  });

});
#myNavbar.navbar-collapse.in {
    overflow-y: visible;
}
.navbar-nav > li{
		float:left;
        margin-left: 10px;
	}


.typeahead,
.tt-query,
.tt-hint {
  width: 396px;
  height: 30px;
  padding: 4px 12px;
  font-size: 14px;
  line-height: 30px;
  border: 2px solid #ccc;
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  outline: none;
  margin-top: 10px;
}

.typeahead {
  background-color: #fff;
}

.typeahead:focus {
  border: 2px solid #0097cf;
}

.tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}

.tt-hint {
  color: #999
}

.tt-menu {
  width: 422px;
  margin: 12px 0;
  padding: 8px 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 8px;
     -moz-border-radius: 8px;
          border-radius: 8px;
  -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
     -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
          box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.tt-suggestion {
  padding: 3px 20px;
  font-size: 18px;
  line-height: 24px;
}

.tt-suggestion:hover {
  cursor: pointer;
  color: #fff;
  background-color: #0097cf;
}

.tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;

}

.tt-suggestion p {
  margin: 0;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
  <title>Test</title>
  <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <!-- Bootstrap -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

  <!-- typeahead -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Test</a>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav">
          <li>
            <input id="pages" class="typeahead form-controler" type="text" placeholder="abc">
          </li>
          <li>
            <a href="#">
              <span class="glyphicon glyphicon-search"></span>
            </a>
          </li>
        </ul>


      </div>
    </div>
  </nav>

</body>

</html>

Hope it helps!

UPDATE:

Beyond this point, if you need further customization of the typeahead's look, you just need to deal with normal CSS.

For example, as you said on your comments, the glyphicon-search is getting cover while typing. That is normal CSS. You can see (using a web inspector) that .navbar-nav > li elements have a media query that make them float in a big screen, and the issue happens just in small ones. You just need to add the same CSS but without any media query to have a consistent behavior:

.navbar-nav > li{
    float:left;
}

And to fix the popping up thingy, allow elements to overflow the navbar:

#myNavbar.navbar-collapse.in {
    overflow-y: visible;
}

I have updated the snippet.

Upvotes: 0

vanburen
vanburen

Reputation: 21663

You don't have .typeahead defined in your CSS. Here's an example:

var substringMatcher = function(strs) {
  return function findMatches(q, cb) {
    var matches, substringRegex;

    // an array that will be populated with substring matches
    matches = [];

    // regex used to determine if a string contains the substring `q`
    substrRegex = new RegExp(q, 'i');

    // iterate through the pool of strings and for any string that
    // contains the substring `q`, add it to the `matches` array
    $.each(strs, function(i, str) {
      if (substrRegex.test(str)) {
        matches.push(str);
      }
    });

    cb(matches);
  };
};

var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
  'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
  'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
  'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
  'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
  'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
  'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
  'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
  'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

$('#the-basics .typeahead').typeahead({
  hint: true,
  highlight: true,
  minLength: 1
}, {
  name: 'states',
  source: substringMatcher(states)
});
/**Custom**/

.navbar.navbar-custom {
  height: 50px;
  border-radius: 0;
  border: none;
}
.navbar-custom .formSearch {
  float: left;
  display: block;
  position: absolute;
  padding-top: 10px;
}
.navbar-custom .form-control,
.navbar-custom .form-control:hover,
.navbar-custom .form-control:focus {
  border: 1px solid #ddd;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  outline: none;
  box-shadow: none;
}
.navbar-custom .inner-addon {
  position: relative;
}
.navbar-custom .inner-addon .glyphicon {
  position: absolute;
  padding: 7px;
  pointer-events: none;
  color: #444;
}
.navbar-custom .right-addon .glyphicon {
  right: 10px;
}
.navbar-custom .right-addon input {
  padding-left: 30px;
}
.navbar-custom .navbar-header .navbar-toggle,
.navbar-custom .navbar-header .navbar-toggle:hover,
.navbar-custom .navbar-header .navbar-toggle:focus {
  border: none;
  background: none;
}
/*Typeahead*/

.navbar-custom .typeahead,
.navbar-custom .tt-query,
.navbar-custom .tt-hint {
  width: 396px;
  height: 30px;
  padding: 4px;
  font-size: 16px;
  line-height: 20px;
}
.navbar-custom .typeahead {
  background-color: #fff;
}
.navbar-custom .typeahead:focus {
  border: 2px solid #0097cf;
}
.navbar-custom .tt-query {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.navbar-custom .tt-hint {
  color: #999
}
.navbar-custom .tt-menu {
  width: 396px;
  margin: 0;
  padding: 4px;
  background-color: #fff;
  border: 1px solid #ddd;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  border-radius: 0;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
}
.navbar-custom .tt-suggestion {
  padding: 3px 20px;
  font-size: 16px;
  line-height: 24px;
}
.navbar-custom .tt-suggestion:hover {
  cursor: pointer;
  color: #fff;
  background-color: #0097cf;
}
.navbar-custom .tt-suggestion.tt-cursor {
  color: #fff;
  background-color: #0097cf;
}
.navbar-custom .tt-suggestion p {
  margin: 0;
}
@media (max-width: 767px) {
  .navbar-custom .formSearch,
  .navbar-custom .form-control,
  .navbar-custom .tt-menu {
    padding-left: 15px;
    width: 250px;
  }
  .navbar-custom .right-addon .glyphicon {
    right: 0;
  }
  .navbar-custom .navbar-collapse {
    background: #f5f5f5;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-custom">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-nav" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>

      </button>
      <form class="formSearch" role="search">
        <div class="inner-addon right-addon"> <span id="the-basics">
                    <input type="text" class="typeahead form-control" id="the-basics"placeholder="United States"> <span class="glyphicon glyphicon-search"></span>
          </span>
        </div>
      </form>
    </div>
    <div class="collapse navbar-collapse" id="bs-nav">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Home</a>

        </li>
      </ul>
    </div>
    <!-- /.navbar-collapse -->
  </div>
  <!-- /.container-fluid -->
</nav>

Upvotes: 2

Related Questions