Don't clear input in search field

[mio510]

I don’t know if this is a js or css question. I have a search field with google maps auto complete function.
So what i want is when someone clicks on the google maps auto complete function where you get the locations i want that value to stay in the search field and not be cleared after clicking one of the locations the user chooses, i want this value to continue to display.
I only want the search field to be cleared once the user navigates away from the search page(s) or clicks in the search field again, then I’d like for the search field to reset to the default text value/placeholder.

i have a sample which you guys can take a look to see what i mean.
here is a search field which does exactly what i want:
Codepen link:
http://codepen.io/anon/pen/rLMMOY

so is it possible to inter grade the above search field fucntions in to my new code.
this is me new code:

[code]

<meta name="keywords" http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="description" http-equiv="Content-Type" content="text/html; charset=UTF-8">

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="IE=edge" http-equiv="X-UA-Compatible">

<link href="https://www.googledrive.com/host/0B6erKxlMnhFDb0JXaVVzU1FWV0U?stylo.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://www.googledrive.com/host/0B6erKxlMnhFDdF9UNFJZeElCS1U?font-awesome.min.css">

<script type="text/javascript" src="https://www.googledrive.com/host/0B6erKxlMnhFDeXdNNVBIaS1tQTA?PrayTimes.js"></script> 
<script type="text/javascript" src="https://www.googledrive.com/host/0B6erKxlMnhFDa2pYaldtLUhUa2s?hijricalendar-kuwaiti.js"></script> 

/*Daily Prayer Timing Code Starts*/

   function getPrayerTimings(latitude, longitude) {
    prayTimes.setMethod('MWL');
    prayTimes.adjust( {asr: 'Standard', isha: '90 min'} );
    prayTimes.tune( {fajr: -90, shoroeq: 0, dhuhr: 0, asr: 0, maghrib: 0, isha: 0} );
    
           var todayDate = new Date(); // today
        function prayerTimings(offset) {
            todayDate.setDate(todayDate.getDate() + offset);
            var times = prayTimes.getTimes(todayDate, [latitude, longitude]);
            var list = ['Fajr', 'Sunrise', 'Dhuhr', 'Asr', 'Maghrib', 'Isha'];
            var html = '<table id="dailyTimeTable">';
            html += '<tr class="qibla_map_bg_h"><td><span class="fajri"></span><br />الفجر<br />Fajr</td><td><span class="shoroeqi"></span><br />الشروق<br />Shoroeq</td><td><span class="dhuhri"></span><br />الظهر<br />Dhuhr</td><td><span class="asri"></span><br />العصر<br />Asr</td><td><span class="maghribi"></span><br />المغرب<br />Maghrib</td><td><span class="ishai"></span><br />العشاء<br />Isha</td></tr>';
            for (var i in list) {
                html += '<td class="qibla_map_bg_tr">' + times[list[i].toLowerCase()] + '</td>';
            }
            html += '</tr></table>';
            document.getElementById('dailyTimeTable-Container').innerHTML = html;

            function $(id) {
                return document.getElementById(id);
            }
        }

        function highlight() {
            var date = new Date();
            var thisminutes = date.getHours() * 60 + date.getMinutes();
            //thisminutes = 1119;
            var tbl = document.getElementById("dailyTimeTable")
            var cells0 = tbl.rows[0].cells;
            var cells1 = tbl.rows[1].cells;
            var help = [];
            for (var i = 0; i < cells1.length; i++) {
                var currenttime = cells1[i].innerHTML.match(/([0-9][0-9]):([0-9][0-9])/);
                if (currenttime) currentminutes = parseInt(currenttime[1]) * 60 + parseInt(currenttime[2]);
                entry = {
                    currentminutes: currentminutes,
                    currentidx: i
                };
                help.push(entry);
            }
            help.sort(function (a, b) {
                return a.currentminutes - b.currentminutes;
            });
            var foundnext = foundcurrent = false;
            var inext = icurrent = -1;
            for (var i = 0; i < help.length; i++) {
                currentminutes = help[i].currentminutes;
                currentidx = help[i].currentidx;
                if (!foundnext && currentminutes > thisminutes) {
                    foundnext = true;
                    inext = currentidx;
                }
                if (currentminutes <= thisminutes) {
                    foundcurrent = true;
                    icurrent = currentidx;
                }
            }
            if (!foundnext) inext = help[0].currentidx;
            if (!foundcurrent) icurrent = help[help.length - 1].currentidx;
            for (var i = 0; i < cells1.length; i++) {
                if (i == inext) {
                    cells0[i].className = "next";
                    cells1[i].className = "next";
                } else if (i == icurrent) {
                    cells0[i].className = "current";
                    cells1[i].className = "current";
                } else {
                    cells0[i].className = "";
                    cells1[i].className = "";
                }
            }
            window.setTimeout(highlight, 0)
        }
        prayerTimings(0);
        highlight();
    }
    /*Daily Prayer Timing Code Ends*/
</script>

    <form class="form-signin">
     <div class="flexContainer">
        <input type="search" id="search" name="search" placeholder="New York" autofocus="" required="">
        <button type="submit"><i class="icon-search"></i></button>
    <button type="submit" id="geo"> <i class="icon-screenshot"></i></button>
    </div>
    </form>

      <div id="map-html">
      </div>
            
                    
                    <div class="wrapper">
                    <div id="dailyTimeTable-Container"></div>
                    </div>
                        
      <script id="map-tmpl" type="text/x-jquery-tmpl">
         <h4>{{city}}</h4>
      </script>
         
</div> 
<!-- /container -->

<div>
    <ul id="multiCityList" class="nav nav-list well well-small"></ul>

    <script id="multiCityTmpl" type="text/x-jquery-tmpl">
        {{#cityItem}}
        <li class="city-item">
            <a href="#{{lat}}|{{lng}}|{{address}}" lat="{{lat}}" lng="{{lng}}" class="multiCity">
                <i class="icon-map-marker"></i>{{address}}
            </a>
        </li>
        {{/cityItem}}
        <li class="removeCityList">
            <button class="btn" type="button">&times;</button>
        </li>
    </script>
</div>

<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://www.googledrive.com/host/0B6erKxlMnhFDUHlRTWlJYjFxZ2M?jquery.js"></script>

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&key=AIzaSyDx6yESNHPjUqcO3Xyw4dkWGbr7zLHN72E"></script>


 <script src="https://www.googledrive.com/host/0B6erKxlMnhFDeHBWb285QndaNHM?utils.js"></script>
<script src="https://www.googledrive.com/host/0B6erKxlMnhFDR1VJU0c2LXNkZk0?utils-geo.js"></script>
<script src="https://www.googledrive.com/host/0B6erKxlMnhFDb2MyUkpIMzhncEU?mustache.js"></script>
<script src="https://www.googledrive.com/host/0B6erKxlMnhFDTHIya1pIcnp5eUU?main.js"></script>
<script>
    var city = localStorage.getItem("city");
    var lat = localStorage.getItem("latitude");
    var lng = localStorage.getItem("longitude");
    if (!city) {
        city = "New York";
        lat = 40.7127837;
        lng = -74.00594130000002;
    }
    updateMap(city, lat, lng);
</script>

[/code]

codepen link:
http://codepen.io/anon/pen/xOEEGj

I’m new to coding so any help would be great.