prevent jquery autocomplete from focusing textbox when clicking result list

The problem is that on mobile the keyboard shows when a textbox is focused.
So I'm trying to find a way to prevent the textbox from focusing when I click the list of results from the autocomplete widget

type a few chars in textbox and get a list of results
note that I keep the result list open until I close with an "X"
on mobile I close the keyboard so I have a decent view of things
on a PC one can click different rows and view details of each in an element shown next to the list
but on mobile since the textbox focuses on each row click the keyboard also shows - and is in the way - really annoying ...
LVL 25
dgrafxAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
Which autocomplete are you using?

Basically you need to attach to the select event with javascript and then use code to set the focus to another element.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
dgrafxAuthor Commented:
I guess I don't know which one it is but this is how I call it

$('#keywords').autocomplete({                  
      source: acsourcepath,
      minLength: 2,
      select: function(event, ui) {

here i can focus a link which solves the problem but creates the problem of the link being focused
window focus doesn't work
i don't naturally have anything that i would want to focus
so tried <a name> with an href and that seems to work
i had given up after window.focus ...
thanks a lot !

      }
}
Julian HansenCommented:
You are welcome.
Bootstrap 4: Exploring New Features

Learn how to use and navigate the new features included in Bootstrap 4, the most popular HTML, CSS, and JavaScript framework for developing responsive, mobile-first websites.

dgrafxAuthor Commented:
Julian - I just discovered that Chrome Mobile still focuses on click of the results but then I'm able to focus another element.
So the result is that when you click a result the keyboard shows for an instant then disappears but the screen scrolls up to where the textbox is because it was focused.
I only have 2 mobile browsers - Puffin and Chrome and only Chome does this - any ideas?
I can start a new question ...
Please advise
Julian HansenCommented:
Try putting a hidden text box next to the select and focus on that. You could even put them both in a container and position the hidden text absolutely so it sits behind the select so if a scroll happens it scrolls to the same position as the auto complete.
dgrafxAuthor Commented:
Thanks I'll try it ...
dgrafxAuthor Commented:
I didn't fully read what you just said.
That the page jumps to the position of the autocomplete box is what the problem is - undesirable behavior. This is only seen on the chrome mobile browser from the browsers I've tested.
Whichever internal js function is focusing the autocomplete box before i can put focus elsewhere - at least on Chrome mobile.
Other browers work perfectly with your original suggestion. The anchor that I'm focusing on when clicking the select list is absolutely positioned so there's no jumping.
Julian HansenCommented:
Try putting the following on the first line of the select function. This might break functionality but let's see what that does
event.stopPropagation() 

Open in new window

More info on stopPropagation here (https://api.jquery.com/event.stoppropagation/)
dgrafxAuthor Commented:
I still need to try this.
I haven't been able to get back to it yet.
I appreciate your help!
Julian HansenCommented:
I appreciate your help!
You are welcome.
dgrafxAuthor Commented:
unfortunately it doesn't stop the autocomplete focus
it doesn't seem to break the widget at all though
if you ever think of anything I'd be interested in trying it
thanks again!!!
Julian HansenCommented:
Do you have a link to the site?
dgrafxAuthor Commented:
Julian - here is a test site that I'm toying with: http://www.arcanefusion.com
It's using jQuery 1.11.1
The "search for products" box is the autocomplete ...
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.