JQuery UI Autocomplete, change event doesn't fire - javascript

I've some problems with JQuery Autocomplete, my code it's like:
var mySource = [{"label":"Value one","id":"1"},{"label":"Value two","id":"2"},{"label":"Value three","id":"3"}];
$("#txtAutocomplete").autocomplete({
source: mySource,
select: function(event, ui){
if(ui.item){
//console.log('select', ui.item.label);
$("#hiddenField").val(ui.item.id);
return ui.item.label;
}
else{
//console.log('select with null value');
$("#hiddenField").val('');
}
},
change: function(event, ui){
if(ui.item){
//console.log('change', ui.item.id);
$("#hiddenField").val(ui.item.id);
}
else{
//console.log('change with null value');
$("#hiddenField").val('');
}
}
});
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<p>
<ol>
<li>Type 'Value' in the text box</li>
<li>Press 'arrow down' to select the first element</li>
<li>Press enter</li>
<li>Keep pressed backspace to delete completely the selected item</li>
<li>Press TAB</li>
<li>Value in 'readonly' field is still there</li>
</ol>
</p>
<input type="text" id="txtAutocomplete">
<input type="text" id="hiddenField" disabled="disabled">
<button>Button added just to have an element to focus on</button>
When I put the string 'value' in the editable field, autocomplete appears correctly, so I can select one value and put it in the textbox with id hiddenField.
Then, if I clear the value in the textbox, I can't update the related hiddenField with a blank value, because change event doesn't fire. Why?
Steps to test snippet:
Write 'value' in the editable field
Select one value
Clear the selected value
hiddenField will still contain old value.
Thanks
Note: It doesn't work when I clear the field after selection but still keeping the focus on it.
Updated: I reported the bug here on bugs.jqueryui.com

I have run to this problem and there is a hack to avoid the problem. You have to force a blur but with a setTimeout
if(ui.item){
//console.log('select', ui.item.label);
$("#hiddenField").val(ui.item.id);
setTimeout(function () {
$(event.target).blur();
});
return ui.item.label;
}

You don't have to keep the inputs in sync inside the autocomplete options. Attach a separate event handler to your text input like so:
$("#txtAutocomplete").autocomplete({
source: ['test1', 'test2', 'test3'],
select: function(event, ui){
console.log('select', ui.item.value);
$("#hiddenField").val(ui.item.value);
}
});
$("#txtAutocomplete").on("input propertychange", function () {
console.log("change", this.value);
$("#hiddenField").val(this.value);
});
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<input type="text" id="txtAutocomplete">
<input type="text" id="hiddenField" disabled="disabled">

When I run your code snippet, the change event does get fired each time I select an item, or when I clear the value, and the log gets printed. But the event gets fired only after I tab out after a selection, or after I click outside the auto-complete input element.
This is because, as per the documentation, the change event gets fired only when the element loses focus.
Steps that make it work:
Write 'test' in the editable field, and select an option
Tab out - this fires the change event
Delete the value
Tab out - this fires the change event

Related

Jquery click not working first time when inputs are in focus

Now I have an input when typing in the input it automatically displays a list based on query.
When the 'Favourite' star icon is clicked I want to call some function. Here the problem is when the input is in focus. The first click is not working when input is still in focus. The second time the function is called.
How do I avoid this and make the click work first time even though input is in focus?
let name = 'foo';
jQuery($ => {
$("#search-input").on("change keydown paste input", function() {
if (this.value == "") {
return true;
}
// some filter function on object to loop and display below list.
$(".search-result").append("<li class='searchitem'>" + name + " <i class='favourite far fa-star'></i></li>");
});
$(document).on("click", ".favourite", function() {
alert("hi");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<input type="text" id="search-input" />
<ul class="search-result">
</ul>

How can i exclude some element from focusing out?

I have input. When i focus out on that input the focus out event gets triggered.
But under that input i am having
<div id="myDiv">
<ul>
<li>1</li>
</ul>
</div>
i want focus out event to be triggered when the inputs gets focus out - but when this under - when it is clicked - i don't want the focusing out of the input to ba happened.
I tried this here:
How to exclude Id from focusout
$('#id').focusout (function (e) {
if (e.relatedTarget && e.relatedTarget.id === 'dontFocusOut') {
return;
}
//do your thing
});
but it does not work for me - in event.relatedTarget i always get null.
You can do like this:
function my_fun(){
alert('Focus Out');
}
<input type="text" placeHolder="After focusout it will work" onfocusout="my_fun();" />

JQuery UI AutoComplete inserts <br> after select

I am using JQuery UI AutoComplete in a content editable div. I am encountering an issue where a <br>-tag is inserted after I select a value from the autocomplete dropdown and I type something in the end of the <div>.
The steps to reproduce are:
Write something
Select something from the autocomplete dropdown
Place cursor at end of content editable div
Insert a space
This results in a <br> tag being inserted at the end of the <div>. How can I prevent this?
http://jsfiddle.net/qf5L0d27/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="main" contenteditable="true" style="border:1px solid black;width:300px;height:200px"></div>
<script>
$("div").autocomplete({
source: function (request, response){
response(['test1', 'test2']);
},
select: function(event, ui){
el = $("div#main");
old_content = el.html();
extra_content = ui.item.value;
el.html(old_content + extra_content);
el.autocomplete("destroy");
return false;
}
});
</script>
This does not appear to be a problem with autocomplete.
A contenteditable div inserts a <br> or depending on the browser at the end if it loses and regains focus.

Selecting <li> item using jQuery after doubleclick

Here's what I'm trying to do:
I have an input field one can use to add entries to a todo list. I use JQuery to display a sorted list of entries after the user clicks 'Add'. I also made the list sortable (You can change the order by mouse drag using jQuery.) Now what I want to bold an individual list item when it is double-clicked. Somehow I'm not getting the jQuery to select the right item...
Here's my code.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
<script type="text/javascript" src='script.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<title>Tadum</title>
</head>
<body>
<h2>Tadum - The ToDo List</h2>
<h3>Enter New ToDos</h3>
<form id="addForm">
<input type="text" name="ToDoListItem"></input>
</form>
<div id="button">Add!</div>
<h3>Your ToDos</h3>
<ol class="todolist"></ol>
</body>
</html>
CSS:
.todolist li{
font-weight: normal;
}
.todolist {
font-family:garamond;
color:#cc0000;
}
Javascript
$(document).ready(function() {
$('#button').click(function(){
var toAdd = $('input[name=ToDoListItem]').val();
$('.todolist').append('<li class="item">'+toAdd+'</li>');
$('#addForm')[0].reset();
});
$('ol').sortable();
$('ol').css('cursor', 'pointer');
$('.todolist li').dblclick(function(){
$(this).css('font-weight', 'bold');
});
});
NOTE:
Somehow what works is if I replace the .list li in jQuery and in the CSS stylesheet with a simple ol. Then a doubleclick displays all items in the list (which is, of course, not what I want). But somehow I can't figure out how to only select the individual <li> that is doubleclicked with jQuery...
(I also tried a bunch of variations on this. For example, only use 'li' to select the doubleclicked item or use 'ol li', or '.item li'. None of them work.)
You need to bind the dblclick event handler to the newly added list items, like this:
$(document).on('dblclick', '.todolist li', function(){
$(this).css('font-weight', 'bold');
});
Please note that this doesn't toggle the style, but just makes them bold on double click. If you double click again it won't do anything.
Also if I may suggest some other changes to your JavaScript code: Your form can be normally submitted like any other form, for the purposes of this to do list anyways. I've also added a label to the HTML <form> for accessibility purposes.
$(document).ready(function() {
$('#addForm').submit(function(e){
e.preventDefault();
$('.todolist').append('<li class="item">' + $('#ToDoListItem').val() + '</li>');
$(this)[0].reset();
});
$('ol').sortable().css('cursor', 'pointer');
$(document).on('dblclick', '.todolist li', function() {
$(this).css('font-weight', 'bold');
});
});
HTML
<form id="addForm">
<label for='ToDoListItem'>Item:</label>
<input type="text" id="ToDoListItem" />
<button type='submit'>Add!</button>
</form>
You are adding the li items after the document was created. So you need to use "on" method so that you can trigger the click on the newly created items afterwards.
$(document).ready(function() {
$('#addForm').submit(function(e){
e.preventDefault();
var toAdd = $('#ToDoListItem').val();
$('.todolist').append('<li class="item">'+toAdd+'</li>');
$('#ToDoListItem').reset();
});
$('ol').sortable().css('cursor', 'pointer');
$(document).on('dblclick','li.item',function(){
$(this).css('font-weight', 'bold');
});
});

Using jQuery, setting Draggable on an element prevents blur from firing when you click the draggable element

Using jQuery, when you set a blur event on a text box and set another element as draggable, when you click the draggable element, the blur event does not fire in FireFox. IE is a little better, you get the blur event but you don't get the click event on the draggable element.
If you don't specify the cancel: "" in the draggable constructor, you will get the blur event to fire, but then the element you want to drag is not draggable.
jQuery v1.3.2
jQuery UI v1.7.2
The console.log lines are for FireFox's FireBug plugin.
<HTML>
<HEAD>
<TITLE>Blur/Click Workbench</TITLE>
<script src="js/jquery.js" type="text/javascript" ></script>
<script src="js/ui/ui.core.js" type="text/javascript"></script>
<script src="js/ui/ui.draggable.js" type="text/javascript"></script>
<script type="text/javascript">
function blurring() {
console.log('1 - blurring - ' + $( this ).attr('id'));
}
function clicking() {
console.log('2 - clicking - ' + $( this ).attr('id'));
}
$(document).ready(function() {
$( ".draggableTool" ).draggable( { cancel: "" } );
$( '.property' ).blur( blurring );
$( '#labelContainer' ).click( clicking );
});
</script>
</HEAD>
<BODY>
<input type='text' class='property' id='tb1' />
<br />
<input type='text' class='property' id='tb2' />
<br />
<label class='draggableTool' id='labelContainer' style='height:20px;position:absolute;'>
<textarea id='taLabel' style='height:100%;background-color:white;border:1px solid grey;'>Label</textarea>
</label>
</BODY>
</HTML>
I had the same problem. It's a bug. For a solution see here: http://dev.jqueryui.com/ticket/4261
It could be that the draggable label isn't focusable. Try adding a tabindex attribute to it. This way when you click on it, it'll gain focus (and hence, blur the other elements).

Categories