Place a drop-down menu inside the input box

Struggling with this issue, I've come across various messy solutions, but I'm determined to find a cleaner one. What I'm looking for is an input field that includes a dropdown selection on the left side.

This is essentially what I have in mind: http://jsfiddle.net/spadez/7BgYU/

<form name="multisearch" action="http://www.wittysparks.com/searchvideos/?q=" id="multisearchForm" method="get">
<ul class="ws_drop_down">
    <li><a href="#" title="Global Search"><span id="selectedsearch">ViDEOs</span>
    <![if gt IE 6]>
    </a>
    <![endif]>
    <!--[if lte IE 6]><table><tr><td><![endif]-->
    <ul class='ws_drop_downm'>
      <li><a href="javascript:void(0);" onclick="forWebSearch('http://www.wittysparks.com/news/search/?q=','NEWs');" title="Search NEWs">NEWs</a></li>
      <li><a href="javascript:void(0);" onclick="forWebSearch('http://www.wittysparks.com/searchvideos/?q=','ViDEOs');" title="Search ViDEOs">ViDEOs</a></li>
      <li><a href="javascript:void(0);" onclick="forWebSearch('http://www.wittysparks.com/searchvideos/?q=','TOPiCs');" title="Search TOPiCs">TOPiCs</a></li>
      <li><a href="javascript:void(0);" onclick="forWebSearch('http://www.wittysparks.com/searchvideos/?q=','QUOTEs');" title="Search QUOTEs">QUOTEs</a></li>
    </ul>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
    </li>
</ul><input class="multisearchInput" name="q" type="text" value="Type here & press enter" onFocus="this.value=''"/></form>

My goal is to embed this WITHIN the input box itself, similar to Google's microphone icon placement:

https://www.google.com/search?q=test

So my question is, what's the most effective way to achieve this while ensuring compatibility and minimizing unnecessary code or workarounds?

javascriptcsshtml

Answer №1

Providing a simplified response for future reference.

To easily customize your dropdown, place it within a container and adjust its CSS properties when focused or unfocused.

Replaced the dropdown code with containers for improved clarity. Simply utilize the formcontainer to hold both elements along with event listeners.

<div id="formcontainer">
    <div id="dropdowncontainer">
        <!-- dropdown here-->
    </div>
    <div id="inputcontainer">
         <input class="multisearchInput" name="q" type="text" value="Type here & press enter" />
    </div>
</div>

Include this JavaScript in your code snippet.

document.getElementById('multisearchInput').onfocus=function(){
    this.value='';
    document.getElementById('formcontainer').style['border'] ='1px solid red';
}

document.getElementById('multisearchInput').onblur=function(){
    document.getElementById('formcontainer').style['border'] ='none';
}

Check out the live example on jsfiddle : http://jsfiddle.net/7BgYU/2/

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Learn how to smoothly transfer a URL from JavaScript to HTML and initiate the download process

I created a website that solely relies on HTML5, CSS and JavaScript to function. The core functionality of this website involves utilizing YouTube URLs. I have stored the URL of a specific YouTube video as a variable, now I am looking for a way to transfer ...

javascriptjqueryhtmlyoutube

Utilizing the Jquery click function to assign an element as a variable

I'm currently working on a script that aims to extract the inner text of any clicked item with the class "customclass". Keep in mind that this specifically targets anchor elements. However, I've encountered an issue where the individual element ...

javascriptjquery

Node-Fetch encounters problematic JSON response with Danish characters

I'm currently working on querying a Real Estate Website. When I send a fetch request with terms like 'Næstved','Præstø',Karrebæksminde, the response is not satisfactory as characters like æ,ø are replaced by ? symbols. I att ...

javascriptjsonnode.jsrestescaping

Transform an array of arrays object with multiple depths into an array of objects

Having some difficulty with the conversion of an array of arrays-like object into an array of objects. The reduce method is being used, and it successfully converts the array data to an object for the first set of arrays. However, on the second iteration, ...

javascriptarraysobject

The property 'dateClick' is not found in the 'CalendarOptions' type in version 6 of fullcalendar

Below is the Angular code snippet I am currently using: calendarOptions: CalendarOptions = { plugins: [ dayGridPlugin, timeGridPlugin, listPlugin ], initialView: 'dayGridMonth', headerToolbar: { left: 'prev today next' ...

javascriptangularfullcalendarfullcalendar-6

Stopping Angular.js $http requests within a bind() event

As stated in this GitHub issue Is it expected to work like this? el.bind('keyup', function() { var canceler = $q.defer(); $http.post('/api', data, {timeout: canceler.promise}).success(success); canceler.resolve(); } ...

javascriptjqueryangularjsangularjs-directiveangular-http

What is the best way to remove this .click function?

My goal is to create a switch function where clicking the "on" button changes its CSS, and if the user then clicks on the "off" button, the CSS returns to normal. I also need the switch to default to the "on" position, but my attempts so far have been unsu ...

javascriptjqueryhtmlcss

The sub-menu is being obscured by a PDF element in Internet Explorer, causing visibility issues

I have an object type tag on my page that displays a PDF file. Everything is functioning correctly, but in Internet Explorer, my sub-menu is being hidden behind the object tag. var objTag = $('<object></object>') .attr({ data: source ...

javascripthtmlcssinternet-explorer

Enter the text within the TypeScript file where the cursor is positioned

I am interested in exploring certain inferred types within TypeScript code. This would be particularly beneficial for ensuring that the inferred types are precise, specific, and accurate in correct files. Is there a way to retrieve the type at a specific ...

javascripttypescriptflowtypetype-inference

What could be causing my HTML form elements to shift position when I click on them in Internet Explorer 8?

I'm facing an issue with my HTML form that has multiple input fields (text and select types) arranged in pairs on each row. Surprisingly, everything works fine in all browsers, including IE7. However, when it comes to IE8, I encounter a peculiar probl ...

htmlcssinternet-explorer-8formsinput-field

Using JQuery to locate radio buttons that have been selected based on a variable

In my JavaScript code, I have created a variable called "thisRadio" to represent a dynamically generated div containing multiple radio buttons. Currently, one of these radio buttons may be checked and my goal is to find the checked radio button within this ...

htmljqueryradio-button

"Combining the power of JavaScript countdown with PHP date functionality

I have a JavaScript code that generates countdowns based on the user's PC date. I'm looking for a way to modify the script to use a specific timezone like: <?php date_default_timezone_set('Ireland/Dublin'); $date = date('m/d/Y ...

phpjavascriptdatecountdown

AngularJS requires that JSON object property values be converted to strings in order to be displayed as actual templates

Each tab click accesses a json array containing unique templates such as ui-grid or c3 chart directive (c3.js). When a specific tab is clicked, the template in string format must be rendered into actual templates like ui-grid, c3-chart, etc. var sampleJs ...

javascriptangularjsangularjs-scopeangularjs-templates

Display Vue component using a string input

Is there a solution to make this non-functioning example work, or is its usage illegal? Vue.component('hello', { template: '<span>Hello world!</span>' }) Vue.component('foo', { data(){ return { ...

javascriptvue.jsvuejs2vue-component

The chat text will automatically scroll down, displaying information loaded from the database

Is there a way to ensure that chat text always remains scrolled to the bottom of the chat? I have tried multiple tutorials and examples from Stack Overflow, but none seem to work for me. Currently, my chat text overflows the textarea when there are too m ...

javascriptjqueryhtmlcssajax

PHP Simple HTML Dom fails to correctly parse specific links

As I dive into the world of HTML DOM Parsers and how they function, I've encountered a problem. I'm able to parse the root domain and other websites successfully, but for some reason, I can't seem to parse a specific link. Can anyone shed li ...

phphtmlcurlsimple-html-dom

Focusing on a text field after reloading a different div with AJAX

I've been spending a lot of time figuring out the following issue and I'm hoping someone can help me find the solution. My web application has an input field (type="text") that is ready to accept user input when the page loads. When the user nav ...

javascripthtmlajax

Link insertion column

How can I insert a hyperlink into this particular column? <div class="col-md-6" style="height: 125px;"> <div style="background: #ffffff;"></div> <div class="borde ...

html

Displaying overlay when sidebar menu is expanded

I am working on creating a smooth overlay transition for when the sidebar menu opens and closes. When the overlay is clicked, I want the menu to close. This is what I have so far: $(document).ready(function() { $('#menu-toggle').click(fun ...

javascriptjqueryhtmlcsstwitter-bootstrap

The initial AJAX GET request is successful, however subsequent clicks do not trigger the call

I have been encountering an issue with my JavaScript where an Ajax call that used to work perfectly fine suddenly stopped working. I have not made any changes to the code that could cause this problem, but something is definitely going wrong. The Ajax call ...

javascriptjqueryajaxasp.net-mvc