Text Input with Suggestion

http://astinquery.blogspot.com/

by astin query

HTML

<div class="input-text-wrap">
	<form action="http://www.google.com/search" method="get">
	<input class="text-input" type="text" name="q" autocomplete="off"/>
	<span class="down-arrow"></span>
	<input class="submit-button" type="submit" value="Search"/>
	<ul>
		<li>Wallpaper 3D</li>
		<li>Anime</li>
		<li>Manga</li>
		<li>Comics List</li>
		<li>Characters</li>
		<li>Animepedia</li>
	</ul>
	</form>
</div>

CSS

body {
  background-color:#FAF6D1;
  margin:0 0;
  padding:50px 0;
  text-align:center;
}

/* outer */
.input-text-wrap {
  text-align:left;
  display:inline-block;
  background-color:white;
  border:1px solid #8E8E74;
  height:30px;
  position:relative;
  font:normal normal 12px/30px Segoe,"Segoe UI",Arial,Sans-Serif;
  color:#333;
  -webkit-box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.4);
  -moz-box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.4);
  box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.4);
}

/* focused `.input-text-wrap` */
.input-text-wrap.focused {
  -webkit-box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.7);
  -moz-box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.7);
  box-shadow:inset 0 1px 2px -1px rgba(0,0,0,.7);
  border-color:black;
}

/* resets or netralize all element inside */
.input-text-wrap input,
.input-text-wrap form,
.input-text-wrap ul,
.input-text-wrap li {
  margin:0 0;
  padding:0 0;
  list-style:none;
  border:none;
  background:none;
  font:inherit;
  color:inherit;
  vertical-align:top;
}

.input-text-wrap input {display:inline-block}

.input-text-wrap .text-input,
.input-text-wrap .submit-button {
  height:30px;
  line-height:30px;
  font-weight:bold;
  margin:0 20px 0 5px;
  outline:none;
}

/* the text input */
.input-text-wrap .text-input {
  width:160px; /* set the text input width here */
}

/* the submit button */
.input-text-wrap .submit-button {
  width:70px;
  padding:0 0 2px;
  margin:0 0;
  background-color:#FFEAD3;
  border-left:1px solid #8E8E74;
  color:#666;
  cursor:pointer;
  -webkit-box-shadow:0 0 2px rgba(0,0,0,.4);
  -moz-box-shadow:0 0 2px rgba(0,0,0,.4);
  box-shadow:0 0 2px rgba(0,0,0,.4);
  position:relative;
}

.input-text-wrap .submit-button:hover {
  background-color:#EDD8BF;
  color:black;
}

/* the drop-down menu */
.input-text-wrap ul {
  position:absolute;
  top:100%;
  right:-1px;
  left:-1px;
  z-index:99;
  background-color:white;
  border:1px solid black;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,.4);
 ...

JavaScript

(function($) {
	var $inputWrap = $('.input-text-wrap'),
		$arrow = $inputWrap.find('.down-arrow');

	// Hide the dropdown menu when user click outside the `.input-text-wrap`, anywhere...
	$(document).on("click", function() {
		$inputWrap.find('ul').hide();
		$arrow.removeClass('active');
	});

	$arrow.on("click", function(e) {

		// Remove all the `focused` class and hide all visible drop-dow menu
		$inputWrap.removeClass('focused').find('ul:visible').hide();
		// Remove al the `active` down arrow
		$arrow.removeClass('active');

		// Toggle the `.down-arrow` active class
		$(this).toggleClass('active')
			// Add a `focused` class to the `.input-text-wrap`
			.closest('.input-text-wrap').addClass('focused')
				// Show or hide the dropdown `ul`
				.find('ul').toggle()
					// When we click the `li`...
					.find('li').on("click", function() {
						// Set the input text value to the clicked `li`'s text
						$(this).closest('.input-text-wrap').find('.text-input').val($(this).text())
							// and trigger the focus event to it
							.trigger("focus");
						// After that, hide the visible dropdown menu
						$(this).parent().hide();
		});

		// Prevent event bubbling!
		e.stopPropagation();

	});

	// When the text input focused...
	$inputWrap.find('.text-input').on("focus", function() {
		// Add a `focused` class to the `.input-text-wrap`
		$(this).closest('.input-text-wrap').addClass('focused');
	// When the text input loses the focus...
	}).on("blur", function(e) {
		// Remve the `focused` class from `.input-text-wrap`
		$(this).closest('.input-text-wrap').removeClass('focused');
	});
})(jQuery);