<div id="container">
  <div id="searchbar">
    <input type="text" id="topics" style="float:left"/><input type="hidden" id="topicID" />
    <div id="btn" onclick="checkWeb()" style="float:left">Get Started</div>
  </div>
</div>
body {background:url('http://www.creativedancestudio.com/images/Girl_Guitar.jpg');}

#searchbar{width:540px;height:50px; background:#718fff; border-radius:5px;border:3px solid #718fff; box-shadow: 0 0 0pt 10pt rgba(255,255,255,.5)}

#container {width:540px; height:80px; position:relative; margin:0 auto; padding-top:30%;}

input { width:400px ; height:30px; font-size:20px; outline:none; padding:10px;border:none; background:white}

.ui-autocomplete{
  list-style-type:none;
  text-align:left;
  margin-top:10px;
}

.ui-autocomplete li {font-family:"helvetica"; padding:5px 15px; background:white; width:420px; margin-left:-40px; box-sizing:border-box;}

.ui-autocomplete li:hover {color:#fc0;}

#btn {background:#4e74ff; width:100px; height:30px; padding:10px; color:white; font-family:"helvetica";cursor:pointer;text-align:center;line-height:30px;}

.ui-helper-hidden-accessible > div {
  opacity:0;
}

var topics= [{value:"Air Conditioning",label:"Air Conditioning",id:"http://servishero.com/aircon-service-servishero-web-request/"},
{value:"Ant Exterminators",label:"Ant Exterminators",id:"http://servishero.com/request/pest-control/"},
{value:"Baby Shower Party",label:"Baby Shower Party",id:"http://servishero.com/request/event-planner/"},
{value:"Bachelorette Party ",label:"Bachelorette Party ",id:"http://servishero.com/request/event-planner/"},
{value:"Birthday Party ",label:"Birthday Party ",id:"http://servishero.com/request/event-planner/"},
{value:"Cakes",label:"Cakes",id:"http://servishero.com/request/cakes/"},
{value:"Cantonese Lessons",label:"Cantonese Lessons",id:"http://servishero.com/language-lessons-servishero-web-request/"},
{value:"Catering",label:"Catering",id:"http://servishero.com/request/catering/"},
{value:"Chinese Catering",label:"Chinese Catering",id:"http://servishero.com/request/catering/"},
{value:"Chinese Language Lessons",label:"Chinese Language Lessons",id:"http://servishero.com/language-lessons-servishero-web-request/"},
{value:"Cleaning",label:"Cleaning",id:"http://servishero.com/cleaning-service-servishero-web-request-2/"},
{value:"Cockroach Control",label:"Cockroach Control",id:"http://servishero.com/request/pest-control/"},
{value:"Corporate Event",label:"Corporate Event",id:"http://servishero.com/request/event-planner/"},
{value:"Electricians",label:"Electricians",id:"http://servishero.com/electrical-service-servishero-web-request/"},
{value:"English Lessons",label:"English Lessons",id:"http://servishero.com/language-lessons-servishero-web-request/"},
{value:"Event Planning",label:"Event Planning",id:"http://servishero.com/request/event-planner/"},
{value:"Flute Lessons",label:"Flute Lessons",id:"http://servishero.com/music-lesson-servishero-web-request/"},
{value:"Hair and Makeup",label:"Hair and Makeup",id:"http://servishero.com/request/hair-and-makeup/"},
{value:"Halal Catering",label:"Halal Catering",id:"http://servishero.com/request/catering/"},
{value:"Indian Catering",label:"Indian Catering",id:"http://servishero.com/request/catering/"},
{value:"Languages",label:"Languages",id:"http://servishero.com/language-lessons-servishero-web-request/"},
{value:"Maids",label:"Maids",id:"http://servishero.com/cleaning-service-servishero-web-request-2/"},
{value:"Makeup",label:"Makeup",id:"http://servishero.com/request/hair-and-makeup/"},
{value:"Malay Lessons",label:"Malay Lessons",id:"http://servishero.com/language-lessons-servishero-web-request/"},
{value:"Mandarin Lessons",label:"Mandarin Lessons",id:"http://servishero.com/language-lessons-servishero-web-request/"},
{value:"Moving",label:"Moving",id:"http://servishero.com/request/movers/"},
{value:"Music",label:"Music",id:"http://servishero.com/music-lesson-servishero-web-request/"},
{value:"Personal Trainers",label:"Personal Trainers",id:"http://servishero.com/personal-trainer-web-request/"},
{value:"Pest Control",label:"Pest Control",id:"http://servishero.com/request/pest-control/"},
{value:"Photographers",label:"Photographers",id:"http://servishero.com/request/photographer/"},
{value:"Piano Lesssons",label:"Piano Lesssons",id:"http://servishero.com/music-lesson-servishero-web-request/"},
{value:"Pilates",label:"Pilates",id:"http://servishero.com/yoga-pilates-class-servishero-web-request/"},
{value:"Plumbing",label:"Plumbing",id:"http://servishero.com/plumbing-service-servishero-web-request/ "},
{value:"Rat Control",label:"Rat Control",id:"http://servishero.com/request/pest-control/"},
{value:"Swimming Lessons",label:"Swimming Lessons",id:"http://servishero.com/swimming-lessons-servishero-web-request/"},
{value:"Termite Exterminators",label:"Termite Exterminators",id:"http://servishero.com/request/pest-control/"},
{value:"Tutoring (Home)",label:"Tutoring (Home)",id:"http://servishero.com/home-tuition-servishero-web-request/"},
{value:"Tutoring (Lower)",label:"Tutoring (Lower)",id:"http://servishero.com/tuition-lower-web-request/"},
{value:"Tutoring (Upper)",label:"Tutoring (Upper)",id:"http://servishero.com/tuition-upper-web-request/"},
{value:"Vegetarian Catering",label:"Vegetarian Catering",id:"http://servishero.com/request/catering/"},
{value:"Videographers",label:"Videographers",id:"http://servishero.com/request/videographer/"},
{value:"Violin Lessons",label:"Violin Lessons",id:"http://servishero.com/music-lesson-servishero-web-request/"},
{value:"Wedding Catering",label:"Wedding Catering",id:"http://servishero.com/request/catering/"},
{value:"Wedding Planning",label:"Wedding Planning",id:"http://servishero.com/request/event-planner/"},
{value:"Yoga",label:"Yoga",id:"http://servishero.com/yoga-pilates-class-servishero-web-request/"},
{value:"Laundry",label:"Laundry",id:"http://servishero.com/request/laundry/"},
{value:"Dry Cleaning",label:"Dry Cleaning",id:"http://servishero.com/request/dry-cleaning-service/"}];
var url = null;
jQuery(document).ready(function($){
    $( "#topics" ).autocomplete({
        minLength: 0,
        source: topics,
        focus: function( event, ui ) {
            $( "#topics" ).val( ui.item.label );
           $("#topicID").val(ui.item.id);
            url = $("#topicID").val();
            $( "#results").text($("#topicID").val());    
            return false;
        },
        select: function( event, ui ) {
            $( "#topics" ).val( ui.item.label );
            $("#topicID").val(ui.item.id);
            url = $("#topicID").val();
            $( "#results").text($("#topicID").val());    
            return false;
    	}
    })
    
    $('#topics').blur(function()
    {
        if( $(this).val().length === 0 ) {
            url = null;
        }
    });
    
  

});

function checkWeb()
{
    if(url != null)
    {
    	window.open(url,'_blank');   
    }
    else {
     	return false;
    }
	
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-1.4.4.js
  2. https://code.jquery.com/ui/1.11.3/jquery-ui.js