Teamfinder Search Page

by paulftw

HTML

<!DOCTYPE html>
<html lang="en">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.css" rel="stylesheet" />
  
<body>
  
  <div class="navbar navbar-static-top">
  <div class="navbar-inner">
    <div class="container">
    <a class="brand" href="#">TeamFinder</a>
    <ul class="nav">
      <li class="active"><a href="#">Football</a></li>
      <li><a href="#">in Sydney</a></li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          Male <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
            <li>
                <a href=''>Female</a>
            </li>
            <li>
                <a href=''>Male</a>
            </li>
            <li>
                <a href="#">Mixed</a>
            </li>
        </ul>
      </li>
    </ul>
    <ul class="nav pull-right">
      <li>
        <a href="#">My Account</a>
      </li>
    </ul>
    </div>
  </div>
  </div>
  
  
<div class=container>
  
  <div class="row toprow">
    <div class="span8 offset3">
    <form method="get" action="/" class="form-inline" >
      <input id='searchbox' name="q" class="span4" type="text" data-placeholder="Your Suburb or Postcode">
      <button id='searchbutton' type="submit" class="btn btn-primary"> <i class="icon-search icon-white"></i></button>
    </form>
    </div>
  </div>
  <script src="//code.jquery.com/jquery-1.8.3.min.js"></script>
  <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.min.js"></script>
  <script src='//cdnjs.cloudflare.com/ajax/libs/select2/3.2/select2.min.js'></script>
</body>
</html>

CSS

.toprow {
  margin-top: 60px;
}

.toprow form {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 16px 48px;
  border-radius: 6px;
}

button#searchbutton {
    margin-left: 3px;
}

JavaScript

$(function() {
  $('#searchbox').select2({
      minimumInputLength: 3,
      multiple: true,
      query: function (query) {
        var data = {results: [{id:1, text:'Bondi Beach, 2026 NSW'}]};
        query.callback(data);
      },
    formatInputTooShort: function(input, min) {
      return 'Type <strong>Bondi</strong> or <strong>2026</strong>';   
    },
  });
});