How to place button in search box - javascript

I'm trying to create a search box with button inside as Google map. For the search box, it is very easy to create by following this example. However, I couldn't find out how to add a menu button as what they did in Google map. See the following picture for more details.
Thanks.
EDIT: To be clear, I'm referring to the menu button on the left which lies inside the search box. It is not the blue arrow button on the right.

Add the last line into your example to add a button that will appear next to your search box. You will need to write a function that will tell the button what to do when it is clicked.
<body>
<input id="pac-input" class="controls" type="text" placeholder="Search Box"
<button onclick="doStuff()">Press to Search</button>

Related

create a drop down list in search bar in HTML

I have created a dropdown list on my webpage using a basic statement in HTML but it is in the body section of my page. I added a search bar in my topnav and have been attempting to move this dropdown list so it appears there once someone clicks in the field or starts to type, but the data in the dropdown list is from an SQL database (corporate company) and not a predefined list such as . I am using local ASP to pull the data from SQL, and HTML & Java to populate it.
Does anyone know how to write the HTML & Java so that the dropdown list with my data appears in the search bar once someone clicks in the search bar? My code is below.
This is my logic that originally worked
<select id="containerlist" onchange="newcontainer()"></select>
This is the logic that I have been trying
<div class="search-container">
<input id='input' type="text" placeholder="Container #.." onkeyup="filterFunction()"<select id="containerlist" onchange="newcontainer()"</select>/>
<button type="submit">Search</button>
</div>
I also tried the code below but not sure what I would put in the value section for the option...
<div class="search-container">
<input type="text" list="containerlist" />
<datalist id="list">
<option> id="containerlist" value="?"</option>
</datalist>
</div>
The output should be, I can click into the search bar, and start to type and the dropdown list will appear and filter as I continue to refine my search.

get title of items selected using TAB button, on a web page

I have a web application with no images in it. It is for visually impaired people. It is navigated using TAB button. How can I get the title/text of the selected web page like button,menu,etc. By selected I mean using TAB button, not mouse click. Using Javascript or any other language.
Use .focusin() method of jQuery library. Try to navigate on the form inputs from the snippet below using TAB button.
$(document).focusin(function(e) {
console.log(e.target.name);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="#">
<input type="text" name="input1"/>
<input type="text" name="input2"/>
<input type="text" name="input3"/>
</form>
I used name property of the event target in my example, but you could get any property value. For example
$(document).focusin(function(e) {
console.log($(e.target).attr("type"));
});
It is possible to get id and another info by same way.

Disable Text Field Ckeditor Dialog

I have a text input field that when double clicked, opens a Text Field Ckeditor Dialog, how would one stop this from happening, either by disabling the dialog itself, or possibly customizing it so it has a message in it for example?
I've looked and debugged into the code to figure out how this dialog is popping up and if i can even customize it but to no avail, any help is appreciated.
Here is the structure of the text area element:
<span class="TextInputWrapper">
<input class="TextInput" style="width:180px;height:26px;font-size:inherit" type="text" value="" id="20131021138501198809822047" data-cke-editable="1" contenteditable="false" data-cke-saved-name="">
</span>

Move between div elements with keyboard arrows

I have a "search as you type" control developed by another developer who is no longer there. Basically the control at the beginning looks like below:
<div id="someID">
<input type="text"/>
</div>
When the user searches for something. Each result is added as a new div element below the original div, like below:
<div id="someID">
<input type="text"/>
</div>
<div><span>result1</span></div>
<div><span>resul2</span></div>
I want to add the ability to move between these divs with up and down arrows, then clicking enter to choose the div, instead of using the mouse, knowing that I don't know the exact number of divs beforehand. I read some questions on stackoverflow, but they seem to expect the exact number of divs. Any solution or guidance is appreciated.
Thanx.

Hide div after sorting

I have Google Maps with properties pins, and a search box below it. After the user clicks on "sort", pins are shown based on user's criteria. I'm looking for a solution that would allow me to hide the search box, and only leave the box "Show search", instead of "Sort".
Here is the image how it currently looks:
http://i.imgur.com/S1q1xNH.jpg
And here is part of the search box code:
<div class="main-search">
<form id="main-search" method="post" action="#">
<!-- search box fields here -->
<input type="submit" value="Sort" class="search-submit" id="search-submit" />
</form>
</div>
How can I fix this problem?
A simple demo is at http://jsfiddle.net/xekR9/1/.
Don't forget to change return false to return true to allow PHP post.
I am not sure what you mean to leave the show search, but to hide the button do this:
$('.search-submit').on('click',function(){
$(this).hide();
});

Categories

Resources