m_hutchins Posted August 19, 2019 Share Posted August 19, 2019 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 More sharing options...
m_hutchins Posted August 19, 2019 Author Share Posted August 19, 2019 Side note: I've tried just adding "autofocus" to the input and I'm having no luck. Link to comment Share on other sites More sharing options...
justsomeguy Posted August 19, 2019 Share Posted August 19, 2019 You can target the input element and use the focus method, e.g.: document.getElementById('search_input').focus(); Link to comment Share on other sites More sharing options...
m_hutchins Posted August 19, 2019 Author Share Posted August 19, 2019 I can't seem to get it to work. I'm not sure if it's because the form is in a modal?? Link to comment Share on other sites More sharing options...
justsomeguy Posted August 20, 2019 Share Posted August 20, 2019 I don't know why that would matter. The input has a unique ID and you're using that to focus it, right? Make sure to check your browser console for error messages. Link to comment Share on other sites More sharing options...
m_hutchins Posted August 20, 2019 Author Share Posted August 20, 2019 Thanks for the replies! Well, autofocus="autofocus" attribute is working in Chrome but not FF or Edge. I found some info on others having the same issue, but am having a hard time getting any solution to work for me. Ugh! Link to comment Share on other sites More sharing options...
dsonesuk Posted August 20, 2019 Share Posted August 20, 2019 <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 More sharing options...
m_hutchins Posted August 21, 2019 Author Share Posted August 21, 2019 I tried it like this: jQuery('#search > form > .input-group > input[type="search"]').focus(); }); Still no luck. Link to comment Share on other sites More sharing options...
dsonesuk Posted August 21, 2019 Share Posted August 21, 2019 <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 More sharing options...
m_hutchins Posted August 23, 2019 Author Share Posted August 23, 2019 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 More sharing options...
dsonesuk Posted August 23, 2019 Share Posted August 23, 2019 And STILL! You have a id with a space between between the whole value, this is invalid it can be misread as referencing a child element after first part value separateed by space, as well as an element with this id never being accessible. Link to comment Share on other sites More sharing options...
m_hutchins Posted August 23, 2019 Author Share Posted August 23, 2019 Forgive me, I'm a super newbie. I dumped the first part of the id, so that it's only one word/value. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now