PDA

View Full Version : Resolved Don't clear input in search field



jadwal
06-18-2016, 02:35 PM
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 my new code:


<html>

<head>

<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>

</head>

<body onload="startTime();">
<script type="text/javascript">
/*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>

<div class="qibla_map_bg">


<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>

</body>

</html>

</body>

</html>

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

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

jscheuer1
06-21-2016, 03:55 PM
That's a very complex page. And what you want is actually the default behavior of a text input, so we can either try removing the code that makes it clear its value, or try adding code that will make it revert to the desired value. But once that is done, it will not automatically clear for receiving the next batch of input for auto completion.

The placeholder value should work though for what you are doing. So try adding this script at the end of your page, right before the </body> tag:


<script type="text/javascript">
$("#search").on('change keyup', function(e){if(e.keyCode && e.keyCode !== 13){return;}setTimeout(function(){$('#search').attr('placeholder', $.trim($('#map-html').text()));}, 200);}).
trigger('change');
</script>

jadwal
06-22-2016, 02:07 AM
Great work. just what i wanted. everything seems to work
Only one minor issue i'm having is when someone is using the geo location the name of that location is not showing up in the search text field but when clicking on the search field after using the geo location the name does appear in the search field, the geo location button is located right next to the search field, which is the last button.

jscheuer1
06-22-2016, 03:05 AM
OK, got it, add the highlighted:


<script type="text/javascript">
$("#search").on('change keyup', function(e){if(e.keyCode && e.keyCode !== 13){return;}setTimeout(function(){$('#search').attr('placeholder', $.trim($('#map-html').text()));}, 200);}).
trigger('change');
$('#geo').on('click keyup', function(e){if(e.keyCode && e.keyCode !== 13){return;}$("#search").trigger('change');});
</script>

jadwal
06-22-2016, 03:03 PM
thanks for the fast reply.
tried the new code but still doesn't do what i want.
i'm sorry if my question wasn't clear . But the problem is that when using the geo location button that located location name isn't showing up in the search field like when you press a location from the google auto complete function which does show up in the search.
The name of the located geo location only shows up in the search field is when you actually press the search text field, but not instantly when you press the geo location button.

jscheuer1
06-22-2016, 04:32 PM
Worked here. I don't really want to mess with geo location any further though. I don't really support that feature in browsers. I think it's invasive.

That said, which browser were you using? I've noticed IE was kind of tricky. If the focus is on the search field, it will not display anything. So, you have to either blur() it or click somewhere else, tab away, etc., if you want to see its placeholder value. I don't think that's happening here (was only a problem in IE here on page load if there was a saved location), but might be.

Oh, one other thing you might try is lengthening the interval (near the end of this line):


$("#search").on('change keyup', function(e){if(e.keyCode && e.keyCode !== 13){return;}setTimeout(function(){$('#search').attr('placeholder', $.trim($('#map-html').text()));}, 200);}).



setTimeout(function(){$('#search').attr('placeholder', $.trim($('#map-html').text()));}, 200);}).

to - say, 1000:


setTimeout(function(){$('#search').attr('placeholder', $.trim($('#map-html').text()));}, 1000);}).

jadwal
06-23-2016, 12:14 AM
I'm using firefox.
Tried testing this out in IE and strange enough i am not getting any of the problems you mentioned above.
But still having problem with the geo location name not showing up in the search field. I think i have a idea why its not showing up. When using the geo location button users will click twice before the located name will show up. first click is when you click the geo location button and second click is when users are asked to give permission to share their location. The clicking twice before getting the location name is the problem.

jscheuer1
06-23-2016, 03:07 AM
Of course. I'm not sure if it can ever work on the first time if permission hasn't already been given for that page or for the browser in general.

I misunderstood. I assumed permission had already been given. I'm not sure if there's a workaround for that. I'll give it some thought.

In any case, that's part of what I meant about geo positioning being invasive.

Oh, oh - if you can get the page to ask for geo positioning permission when it loads, then it will already have been granted when the time comes to use it - at least in most cases. That might be the workaround.

jscheuer1
06-23-2016, 04:12 AM
Now I got it, add this (highlighted) in main.js:


function successCallback(position) {

getCityFromCoord(position.coords.latitude, position.coords.longitude);

infoGeo("Géolocalisation réussie :-)");
infoHide();
$("#search").trigger('change');
};

I think you should also keep the other code I already gave you for this, as once someone has given permission, it might be required.

jadwal
06-23-2016, 04:27 AM
Yes everything is working as it should.
Last piece of code did the job.

Thanks for the help and your time. I really appreciate it

Topic can be marked as solved

jadwal
06-23-2016, 04:32 AM
One more thing can you please remove my other topic with the name "Having a Drop down menu with google maps api".
It's a function i don't really need anymore.

thanks in advance