Return to Question

deleted 42 characters in body

Source Link

edited Oct 7, 2021 at 2:41

Hooman Bahreini

edited Oct 7, 2021 at 2:41

Hooman Bahreini

enter image description here enter image description here

enter image description here

deleted 230 characters in body

Source Link

edited Oct 6, 2021 at 22:11

Hooman Bahreini

edited Oct 6, 2021 at 22:11

Hooman Bahreini

var elasticSearchSuggestions = [
 "Armchair", "Apple", "Ball", "Bed", "Book", "Car", "Cooking", "Desk", "Earaser", "Football", "Games",
 "Hammer", "Headphone", "iPhone", "Iron", "Job", "King size bed", "Lamp", "Mobile", "Nail", "Orange",
 "Paper", "Pencil", "Pool", "Rail", "Running Shoes", "Queen size bed", "Saw", "Shoes", "Table",
 "Tools", "Toyota", "UV Light""Umbrella", "Window", "Xerox", "Yarn", "Zoo"
];
function bringStickyInputToTopOfThePageOnMobile() {
 $("#autocompleteInput").on("click", function() {
 $(this).closest('.sticky-container').addClass('active');
 });
 $("#autocompleteInput").on("blur", function() {
 $(this).closest('.sticky-container').removeClass('active');
 });
}
function isMobileDevice() {
 if (Modernizr.mq('(max-width: 767px)')) {
 return true;
 }
 return false;
}
$(document).ready(function() {
 $("#autocompleteInput").autocomplete({
 source: elasticSearchSuggestions,
 position: {
 collision: "flip"
 }
 });
 
 // if (isMobileDevice()) {
 bringStickyInputToTopOfThePageOnMobile();
 // }
});

/* All the CSS is inside this media query
 * @media (max-width:767px) 
 */
.sticky-container.active {
 top: 0px;
 left: 0px;
 position: fixed;
 width: 100%;
 height: 100%;
 padding: 65px 15px;
 z-index: 1;
 background-color: #fff;
 display: block !important;
}
.sticky-container.active:before {
 display: block !important;
 content: 'x';
 font-size: 25px;
 position: absolute;
 top: 25px;
 right: 75px;
}

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Bootstrap Example</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
 <nav class="navbar navbar-expand-sm bg-light">
 <ul class="navbar-nav">
 <li class="nav-item">
 <a class="nav-link" href="#">Home</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">Products</a>
 </li>
 </ul>
 </nav>
 <br>
 <div class="container">
 <h3>Search Products</h3>
 <hr/>
 <form>
 <div class="form-group sticky-container">
 <label>Looking for</label>
 <input id="autocompleteInput" type="text" class="form-control" placeholder="Looking for">
 </div>
 <div class="form-group sticky-container">
 <label>Location</label>
 <input type="text" class="form-control" id="locationInput" placeholder="Location">
 </div>
 <button type="submit" class="btn btn-primary">Search</button>
 </form>
</body>
</html>

var elasticSearchSuggestions = [
 "Armchair", "Apple", "Ball", "Bed", "Book", "Car", "Cooking", "Desk", "Earaser", "Football", "Games",
 "Hammer", "Headphone", "iPhone", "Iron", "Job", "King size bed", "Lamp", "Mobile", "Nail", "Orange",
 "Paper", "Pencil", "Pool", "Rail", "Running Shoes", "Queen size bed", "Saw", "Shoes", "Table",
 "Tools", "Toyota", "UV Light", "Window", "Xerox", "Yarn", "Zoo"
];
function bringStickyInputToTopOfThePageOnMobile() {
 $("#autocompleteInput").on("click", function() {
 $(this).closest('.sticky-container').addClass('active');
 });
 $("#autocompleteInput").on("blur", function() {
 $(this).closest('.sticky-container').removeClass('active');
 });
}
function isMobileDevice() {
 if (Modernizr.mq('(max-width: 767px)')) {
 return true;
 }
 return false;
}
$(document).ready(function() {
 $("#autocompleteInput").autocomplete({
 source: elasticSearchSuggestions,
 position: {
 collision: "flip"
 }
 });
 
 // if (isMobileDevice()) {
 bringStickyInputToTopOfThePageOnMobile();
 // }
});

/* All the CSS is inside this media query
 * @media (max-width:767px) 
 */
.sticky-container.active {
 top: 0px;
 left: 0px;
 position: fixed;
 width: 100%;
 height: 100%;
 padding: 65px 15px;
 z-index: 1;
 background-color: #fff;
 display: block !important;
}
.sticky-container.active:before {
 display: block !important;
 content: 'x';
 font-size: 25px;
 position: absolute;
 top: 25px;
 right: 75px;
}

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Bootstrap Example</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
 <nav class="navbar navbar-expand-sm bg-light">
 <ul class="navbar-nav">
 <li class="nav-item">
 <a class="nav-link" href="#">Home</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">Products</a>
 </li>
 </ul>
 </nav>
 <br>
 <div class="container">
 <h3>Search Products</h3>
 <hr/>
 <form>
 <div class="form-group sticky-container">
 <label>Looking for</label>
 <input id="autocompleteInput" type="text" class="form-control" placeholder="Looking for">
 </div>
 <div class="form-group sticky-container">
 <label>Location</label>
 <input type="text" class="form-control" id="locationInput" placeholder="Location">
 </div>
 <button type="submit" class="btn btn-primary">Search</button>
 </form>
</body>
</html>

var elasticSearchSuggestions = [
 "Armchair", "Apple", "Ball", "Bed", "Book", "Car", "Cooking", "Desk", "Earaser", "Football", "Games",
 "Hammer", "Headphone", "iPhone", "Iron", "Job", "King size bed", "Lamp", "Mobile", "Nail", "Orange",
 "Paper", "Pencil", "Pool", "Rail", "Running Shoes", "Queen size bed", "Saw", "Shoes", "Table",
 "Tools", "Toyota", "Umbrella", "Window", "Xerox", "Yarn", "Zoo"
];
function bringStickyInputToTopOfThePageOnMobile() {
 $("#autocompleteInput").on("click", function() {
 $(this).closest('.sticky-container').addClass('active');
 });
 $("#autocompleteInput").on("blur", function() {
 $(this).closest('.sticky-container').removeClass('active');
 });
}
function isMobileDevice() {
 if (Modernizr.mq('(max-width: 767px)')) {
 return true;
 }
 return false;
}
$(document).ready(function() {
 $("#autocompleteInput").autocomplete({
 source: elasticSearchSuggestions,
 position: {
 collision: "flip"
 }
 });
 
 // if (isMobileDevice()) {
 bringStickyInputToTopOfThePageOnMobile();
 // }
});

/* All the CSS is inside this media query
 * @media (max-width:767px) 
 */
.sticky-container.active {
 top: 0px;
 left: 0px;
 position: fixed;
 width: 100%;
 height: 100%;
 padding: 65px 15px;
 z-index: 1;
 background-color: #fff;
 display: block !important;
}
.sticky-container.active:before {
 display: block !important;
 content: 'x';
 font-size: 25px;
 position: absolute;
 top: 25px;
 right: 75px;
}

<!DOCTYPE html>
<html lang="en">
<head>
 <title>Bootstrap Example</title>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
 <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
 <nav class="navbar navbar-expand-sm bg-light">
 <ul class="navbar-nav">
 <li class="nav-item">
 <a class="nav-link" href="#">Home</a>
 </li>
 <li class="nav-item">
 <a class="nav-link" href="#">Products</a>
 </li>
 </ul>
 </nav>
 <br>
 <div class="container">
 <h3>Search Products</h3>
 <hr/>
 <form>
 <div class="form-group sticky-container">
 <label>Looking for</label>
 <input id="autocompleteInput" type="text" class="form-control" placeholder="Looking for">
 </div>
 <div class="form-group sticky-container">
 <label>Location</label>
 <input type="text" class="form-control" id="locationInput" placeholder="Location">
 </div>
 <button type="submit" class="btn btn-primary">Search</button>
 </form>
</body>
</html>

Post Reopened by Hooman Bahreini, greybeard, Toby Speight, Sᴀᴍ Onᴇᴌᴀ ♦

occurred Oct 6, 2021 at 16:10

update wording, update tags

Source Link

edited Oct 6, 2021 at 16:10

Sᴀᴍ Onᴇᴌᴀ ♦

edited Oct 6, 2021 at 16:10

Sᴀᴍ Onᴇᴌᴀ ♦

29.5k
16
45
202

The home page has 2 inputs: Looking for and Location. UserThe user would enter their desired product and location and click on Search as shown below:

The first input (Looking fori.e. Looking for) has autocomplete functionality and when the user clicks on it, it opens a list of suggestions. I am using the jQuery UI Autocomplete tool to build the suggestions. The suggestions come from Elasticsearch (in this example I am using a static array to demonstrate the behavior).

The problem I'm solving is that on a mobile device, the autocomplete's suggestions opens under the input and the keyboard pops up and hidehides the suggestions as shown below:

What I want to do is to highlight the autocomplete input when it is clickedfocussed in mobile devices. That is to bring it to the top of the screen and hide everything else. This is what ebay does on mobile devices.

The home page has 2 inputs: Looking for and Location. User would enter their desired product and location and click on Search as shown below:

The first input (Looking for) has autocomplete and when user clicks on it, it opens a list of suggestions. I am using jQuery UI Autocomplete to build the suggestions. The suggestions come from Elasticsearch (in this example I am using a static array to demonstrate the behavior).

The problem I'm solving is that on a mobile device, the autocomplete's suggestions opens under the input and the keyboard pops up and hide the suggestions as shown below:

What I want to do is to highlight the autocomplete input when it is clicked in mobile devices. That is to bring it to the top of the screen and hide everything else. This is what ebay does on mobile devices.

The home page has 2 inputs: Looking for and Location. The user would enter their desired product and location and click on Search as shown below:

The first input (i.e. Looking for) has autocomplete functionality and when the user clicks on it, it opens a list of suggestions. I am using the jQuery UI Autocomplete tool to build the suggestions. The suggestions come from Elasticsearch (in this example I am using a static array to demonstrate the behavior).

The problem I'm solving is that on a mobile device, the autocomplete's suggestions opens under the input and the keyboard pops up and hides the suggestions as shown below:

What I want to do is to highlight the autocomplete input when it is focussed in mobile devices. That is to bring it to the top of the screen and hide everything else. This is what ebay does on mobile devices.