Jump to content

How to make search bar initially active on pop-up search bar


m_hutchins

Recommended Posts

Hello, I think I'm in the right spot...

I have a search "magnifying glass" icon in the main navigation of my site that when clicked a full page search bar pops up. Currently, you have to then click again in the search bar to make it active to start typing.  I'm trying to make it so that you don't have to click on the search bar a second time after the search icon has been clicked.  So, basically once the icon is clicked and the search pops up, the search bar is active and ready for the user to type.

You can view the site here: https://www.goiwt.com

Any and all help would be greatly appreciated!

Thanks in advanced.

Link to comment
Share on other sites

<form role="search" id="searchform siq_searchForm" action="/search" method="get" class="radius-xl"><div class="input-group">				<input id="searchbar" value="" name="s" type="search" placeholder="Type to search" autofocus="autofocus" />							<span class="input-group-btn"><button type="button" class="search-btn"><i class="fa fa-search"></i></button></span></div>   </form>		jQuery('#search > form > input[type="search"]').focus();		});
	

input with type="search" does not directly  follow form elelment , a div with "input-group" class is before it, so it is first direct child it is not input type search so focus is not applied.

'>' is first direct child, not including any children of that child.

Link to comment
Share on other sites

<form role="search" id="searchform siq_searchForm" action="/search" method="get" class="radius-xl"> ???????

The console shows 4 errors and 1 warning, 1 error with undefined '$' and possible misplaced '}', unless you fix these it's unlikely any corrected code will work as it should.

Link to comment
Share on other sites

I've been trying to get another modal with a search input to work to see if I can backwards engineer things. I got the second sample to work, but am still having trouble with my initial issue. I've been working on a watered down page here: https://www.goiwt.com/index2.htm

The code that I'm trying to use is:
 

<script type="text/javascript">
      function setFocusOnSearchBar()
    {
        $('#searchbar').focus();
    }

    $("#search").on('shown.bs.modal', function()
    {
        setTimeout(setFocusOnSearchBar, 0);
    });

</script>

And I believe this is the code that makes the search modal show/hide:

//  > Top Search bar Show Hide function by = custom.js =================== //	
	 function site_search(){
			jQuery('a[href="#search"]').on('click', function(event) {                    
			jQuery('#search').addClass('open');
			jQuery('#search > form > input[type="search"]').focus();
		});
					
		jQuery('#search, #search button.close').on('click keyup', function(event) {
			if (event.target === this || event.target.className === 'close') {
				jQuery(this).removeClass('open');
			}
		});  
	 }	

I feel like I'm SO close to getting this to work properly, any other thoughts and/or suggestions would be greatly appreciated!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...