Nominatim-Pretty

by gimoya

HTML

<div id="search">
    <input type="text" name="addr" value="" id="addr" size="10" />
    <button type="button" onclick="addr_search();">Search</button>
</div>
<div id="results-wrapper">
<div class="close-btn" title="Click to close" onclick="$(this).parent().fadeOut('slow');">X</div>
<div id="results"></div>
</div>

CSS

::-webkit-scrollbar {
 background: pink;
 width: 10px;
}

::-webkit-scrollbar-thumb {
 background: blue;
 height: 30px;
 border-radius: 2px;
}

div#search {
    background-color: white;
    position: absolute;
    top: 5%;
    left: 5%;
    width: auto;
    height: auto;
    padding: 10px;
}
div#search input {
    width: 200px;
}

.close-btn {
		color: white;
		font-family: Corbel;
		padding: 5px 10px;
		background: #ccc;
		cursor: hand;
		position: absolute;
		left: 0;
		top:0;
	}
.close-btn:hover {
		background: #aaa;
}
   
div#results-wrapper {
    width: 50%;
    height: 50%;
    left:5%;
    top: 25%;
    margin-left: 10px;
    position: fixed;
		background: lightgreen;
	}
  
  div#results {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
  }
  
  div#header {
    padding-top:2.5em;
    paddin-right
  }

JavaScript

function addr_search() {
    var inp = document.getElementById("addr");

    $.getJSON('http://nominatim.openstreetmap.org/search?format=json&limit=20&q=' + inp.value, function (data) {
        var items = [];

        $.each(data, function (key, val) {
            var str = JSON.stringify([val.lat, val.lon]);
            items.push("<li><a href='#' onclick='alert(" + str + ");'>" + val.display_name + '</a></li>');
        });

        $('#results').empty();
        if (items.length !== 0) {
            $('<div>', {
            	  'id': 'header',
                html: "Search results:"
            }).appendTo('#results');
            $('<ul/>', {
                'class': 'my-new-list',
                html: items.join('')
            }).appendTo('#results');
        } else {
            $('<div>', {
               'id': 'header',
                html: "No results found"
            }).appendTo('#results');
        }
    });
    $('#results-wrapper').fadeIn();
}