JS focusout and click autosuggestions on a search input field - javascript

I built a search-box where I have suggestions displayed as user types in.
<div id="search-box">
<input val="" type="text" id="s" >
<div id="suggest-box">
<div class="suggestions">word1</div>
<div class="suggestions">word2</div>
<div class="suggestions">word3</div>
</div>
</div>
I did add for mobile this code so when the user tap "done" on the mobile keyboard the suggestions box closes up and ti doesn't allow me to click on the suggestions
document.addEventListener('focusout', function(e) {
$("#suggest-box").hide();
});
the problem is that the user can't click on the suggestions though...
how to fix it?

Not sure what the question is..
You can't click the suggestions? They're DIV's and are by default not clickable, unless you add an event listener on it, like so:
suggestionElement.addEventListener('click', function()
{
input.value = 'suggestion';
});
Here's a basic working suggestion box:
https://jsfiddle.net/76p4z033/1/

Related

How do I get the keyboard to pop up on mobile browser when using Javascript / JQuery focus() event

I am able to use $('#text-box').focus(); to successfully focus the cursor on the text-box after a page loads. However, when I load the page on a mobile browser the text-box focuses but the keyboard doesn't popup. I tried using click(); but that doesn't seem to work either.
Any idea how could I make the keyboard popup after text-box focus? or maybe you know how to achieve this with a different approach? This is my code:
$(document).ready(function () {
selectTextBox();
});
function selectTextBox() {
$('#tbFirstName_TextBox').focus();
}
<div>
<span id="tbFN">
<input type="text" id="tbFirstName_TextBox" placeholder="First Name">
</span>
</div>

How to add event listener to div without tabindex=0?

I have something like this control:
I need to track focus on any element inside this control. If I focus input or If I focus (click) calendar icon, I want to know that focus performed.
My idea is to add click listener on wrapper of input + calendar trigger. It is some div.
Out of the box I can't add focus listener to the div. To achieve this I need to add tabindex=0 to this div. This method will work, but it has one minus.
For example, I have form with many controls. Example code is below:
<div class="container">
<input onfocus="onFocus()" />
<div tabindex="0" onfocus="onFocus()">some div</div>
<div tabindex="0" onfocus="onFocus(event.target)">
<input onfocus="onFocus()" />
</div>
<input onfocus="onFocus()" />
</div>
When I focus first input and start looping through TAB key I want this behavior: focus calendar icon, focus next input, focus next calendar icon etc. But with tabindex=0 I break this behaviour. You can check it in this pen. You can see this broken behaviour after some div block.
Well, I have another option to add listener specifically for input and calendar icon (or any other icon). The problem is I have dynamic amount of icons on each field. And I have to add focus listener for each. Much simpler for me (and another developers) is the way when I have only one focus listener on the top (as I think).
Is it somehow possible to add ability to add focus listener to the div without breaking focus loop (like I shown on the codepen example).
Use element.addEventListener('focusin', handler). focus and blur don't bubble, focusin and focusout do.
document.querySelector('.container')
.addEventListener('focusin', function(event) {
console.log(event.target)
})
<div class="container">
<input name="a" />
<div contenteditable="true">some div</div>
<div>
<input name="b" />
</div>
<input name="c"/>
</div>

Focus on bootstrap-tokenfield input

I would like to have focus on the tokenfield input field when the modal shows up.
Currently it's focused only if I click on the input field in the modal.
https://jsfiddle.net/csisanyi/h19Lzkyr/12/
I tried to add the following code
Mousetrap.bind('w', function() {
document.getElementById("keywordButton").click();
document.getElementById("keyword-input").focus();
});
I also tried to add <input autofocus> but when the tokenfield is initialized it seems like it's overriden.
I have checked the bootstrap-tokenfield documentation but input field focus is not really mentioned there.
Any suggestions?
Do you want the focus on the button or the input field? The ID you specified is for focusing on the button. You mention wanting the field to focus, but it doesn't seem you are calling on it. I can't make comments but will edit this as time goes on.
HTML:
<div class="modal-body">
<p class="modal_text">Add keywords.</p>
<input class="token-input input-group-lg keywordmodalclass" id="keyword-input" type="text" name="keywords" value="" placeholder="Keywords">
</div>
<div class="modal-footer">
<button id="saveKeyword" type="submit" class="btn btn-success" onclick="submitKeywords()">Save Keywords</button>
Jquery:
Mousetrap.bind('w', function() {
document.getElementById("keywordButton").click();
document.getElementById("keyword-input").focus();
});
I found a solution to the problem.
after the tokenfield is initialized, bootstrap-tokenfield.js appends the id of the input with -tokenfield.
So i added the following code.
https://jsfiddle.net/csisanyi/h19Lzkyr/43/
Mousetrap.bind('w', function() {
document.getElementById("keywordButton").click();
setTimeout(() => {
document.getElementById("keyword-input-tokenfield").focus();
}, 400);
});
And it works with setting a minimal timeout on the focus expression.

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();
});

Enable an input textbox then focus it - jQuery Mobile

I have an input textbox which is initially disabled.
<input type="text" name="count" id="count" value="0" disabled="true" data-theme="b" />
When I check a radio button i want to enable and focus the textbox, but when i click the radio button it enables the textbox and focuses some other textbox. I think it does not work because the textbox was initially disabled and you can not focus a disabled input.
$(":input[#name='radio']").live('change', function() {
$(":input[#name='count']").removeAttr("disabled").focus();
});
How do I enable the textbox and then focus it?
It appears it was something wrong with the selector ... although the text input box got enabled, it did not get focused, while I tried:
$(":input[#name='count']").removeAttr("disabled").focus();
But when i tried this, it worked:
$("#count").removeAttr("disabled").focus();
I can not explain why this is happening ...
Edit:
It has something to the with the selector, because this works too:
$("input[name='count']").removeAttr("disabled").focus();
but i still can't understand why using the first selector, the textbox gets enabled, but not focused ...
Try below code
$('#count').textinput('enable').focus();
It working fine for me
see
http://jsfiddle.net/kunalvashist/LFXd2/
You have to do it on pageshow.
$("#mainPage").on("pageshow", function (e) {
$('#searchField').focus();
});
on
<body class="ui-mobile-viewport ui-overlay-c">
<div data-role="page" data-add-back-btn="true" id="mainPage">
<div data-role="header" data-theme='b'>
<input type="text" id="searchField" placeholder="Search" />
</div>
</div>
</body

Categories

Resources