5
बूटस्ट्रैप 3 का उपयोग कर भूगर्भीय सुझावों को मैंने एक नेविबार ड्रॉपडाउन लिंक के अंदर एक खोज फ़ॉर्म डाला है और मैं पता फॉर्म इनपुट को पॉप्युलेट करने के लिए JQuery Geocomplete प्लगइन (http://ubilabs.github.io/geocomplete/) का उपयोग करने का प्रयास कर रहा हूं। हालांकि, पते के सुझाव पते के पीछे दिखाई दे रहे हैं ... क्या सीएसएस के साथ इसे ठीक करने का कोई तरीका है?बूटस्ट्रैप नेविबार ड्रॉपडाउन - फॉर्म
हेडर में:
<script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
एचटीएमएल कोड:
<header class="navbar navbar-green navbar-fixed-top navbar-green" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span
class="icon-bar"></span> <span class="icon-bar"></span>
</button> <a href="index.php" class="navbar-brand">Brand</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
<ul class="nav navbar-nav">
<li><a href="#"><i class="icon-map-marker"></i> Browse</a>
</li>
</ul>
<ul class="nav navbar-nav">
<li class="dropdown active"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-search"></i> Find <b class="caret"></b></a>
<ul
class="dropdown-menu search">
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<button type="button" class="btn btn-default navbar-btn" data-toggle="tooltip"
data-placement="right" title="Use your exact location">
<li class="icon-screenshot"></li>
</button>
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Address" name="address"
id="address">
</div>
<div class="form-group">
<select class="form-control">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</div>
<div class="form-group">
<button type="submit" class="btn btn-green">Search</button>
</div>
</form>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-user"></i> USER<b class="caret"></b></a>
<ul
class="dropdown-menu">
<li><a href="#"><i class="icon-pencil"></i> Profile</a>
</li>
<li><a href="#"><i class="icon-upload"></i> Submit</a>
</li>
<li class="divider"></li>
<li><a href="#"><i class="icon-signout"></i> Log out</a>
</li>
</ul>
</li>
</ul>
</nav>
</div>
</header>
और दस्तावेज़ के अंत में मेरे पास है:
<script src="assets/js/jquery.geocomplete.js"></script>
<script>
$(function() {
$("#address").geocomplete({
componentRestrictions: {
country: 'GB'
}
})
});
</script>
आप अपने कोड पोस्ट सकते हैं? – Jared
पढ़ने के लिए धन्यवाद। मैंने एचटीएमएल और जावास्क्रिप्ट कोड के साथ अपना प्रश्न अपडेट कर लिया है। क्या आपको सीएसएस की भी आवश्यकता है? – Matt