jQuery Search Demo

Demo of jQurey plugin that converts an input into a search field that can run off a normal form submit or AJAX load.

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.22/jquery-ui.min.js"></script>
<script src="https://raw.github.com/th3uiguy/jquery-search/master/jquery.search.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.22/themes/base/jquery-ui.css">
<h1>jQuery Search Demo</h1>
<h2>With Submit Button</h2>
<form id="googleSearch" action="https://www.google.com/search" method="get">
    <input type="text" name="q" />
    <input type="submit" value="Search" />
</form>
<br />

<h2>Without Submit Button (AJAX)</h2>
<fieldset>
    <input id="ajaxSearch" type="text" />
    <ul id="ajaxResult"></ul>
</fieldset>

CSS

body{ font-size: 0.9em; font-family: Arial, Verdana, sans-serif; color:#555; }
h1{ margin-top: 0; }
fieldset{ background: #eee; border: 1px solid #ccc; padding:0.5em 0.8em }
.ks-container{ margin: 0.2em 0 0.5em; }
ul{ list-style: none; margin: 0; padding: 0; background-color: #fff; }
ul li{ border: 1px solid #ccc; border-bottom: none; }
ul li:last-child{ border-bottom: 1px solid #ccc; }
ul li a{ display: block; padding: 0.3em 0.6em; text-decoration: none; }
ul li a:hover{ background-color: #ffc; }


/* jquery.search.css */
.ks-container,
.ui-widget-content .ks-container{
    text-align:right;
    padding:1px 1px 1px 0.5em;
    background: #fff;
    zoom: 1;
    font-size: 1em;
}
.ks-container:after{
    content: ".";
    clear: both;
    visibility: hidden;
    display: block;
    height: 0;
    font-size: 0;
}
.ks-container .ks-phrase{
    border: none;
    float:left;
    font-size:1.2em;
    padding:0.3em 0;
    margin:0;
    width:73%;
    outline: none;
    background:none;
    color:#666;
}
.ks-container .ks-clear{
    float: right;
    margin-top:0.4em;
    cursor:pointer;
    padding-right: 2px;
}
.ks-container .ks-submit{
    margin:0;
    font-size:0.9em;
    float: right;
}
.ks-container .ks-blank{
    color:#bbb;
    font-style:italic;
}
.ks-active{
    border:1px solid #999;
}
.ks-active .ks-phrase{
    color:#000;
}

JavaScript

$(function(){
    $('#ajaxSearch').search({
        placeholder: "Type the name of a city...",
        onSubmit: function(input){
            getCities(input.value, function(result){
                var html = "";
                for(var i in result.geonames){
                    var item = result.geonames[i];
                    var cityStr = item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName;
                    html += '<li><a href="http://www.google.com/maps?q=' + encodeURI(cityStr) + '">' + cityStr + '</a></li>';
                }
                $('#ajaxResult').html(html);
            });
        }
    });

    $('#googleSearch').search({ placeholder: "Search Google" });
});

function getCities(term, callback){
    $.ajax({
        url: "http://www.google.com/",
        dataType: "jsonp",
        data: {
            featureClass: "P",
            style: "full",
            maxRows: 12,
            name_startsWith: term
        },
        success: callback
    });
}