I use jQuery UI to give autocomplete suggestions based on a SQL database. This works perfectly, however I would like (just like google) to automatically fill the input with the currently selected/focused (li) element.
input name="movie" type="text" id="titles" class="input-field-primary" placeholder="Test" method="GET" autofocus>
$(function() {
$( '#titles' ).autocomplete({
source: 'includes/search.php',
minLength: 3,
open: function(event, ui) {
$('.ui-autocomplete').off('menufocus hover mouseover mouseenter');
$(window).resize(function() {
$(".ui-autocomplete").css('display', 'none');
});
}
});
})
You can use the focus event on autocomplete.
I have mocked the source below:
$(function() {
$('#titles').autocomplete({
source: ['aaaa', 'bbbb'], // replace this with your AJAX call
minLength: 3,
select: function(event, ui) {
$("#titles").val(ui.value)
},
focus: function(event, ui) {
console.log(ui)
$("#titles").val(ui.value)
}
});
})
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<input name="movie" type="text" id="titles" class="input-field-primary" placeholder="Test" method="GET" autofocus>
Related
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
I have two div containers
top_div
bottom_div
initially top_div will be blank. I'm using jQuery UI drag and drop. I'm able to drag contents from bottom_div to top_div.
My requirement is in above top_div I need to sort (using sortable jQuery UI) the contents.
And after sorting when I refresh the page it should not change its position.
Please any help is appreciated Thanks!
Html Code
<div id="top_div">
</div>
<br/>
<div id="bottom_div">
<ul>
<li class="ui-state-default">Sachin Tendulkar</li>
<li class="ui-state-default">Ab de Villiers</li>
<li class="ui-state-default">MS Dhoni</li>
<li class="ui-state-default">Ricky Ponting</li>
<li class="ui-state-default">Rahul</li>
</ul>
</div>
Jquery Code
<script type="text/javascript">
$(function ()
{
$("#bottom_div li").draggable({
tolerance:'fit',
revert: "invalid",
refreshPositions: true,
drag: function (event, ui)
{
ui.helper.addClass("draggable");
},
stop: function (event, ui)
{
ui.helper.removeClass("draggable");
}
});
$("#top_div").droppable(
{
drop: function (event, ui)
{
if ($("#top_div li").length == 0)
{
$("#top_div").html("");
}
ui.draggable.addClass("dropped");
$("#top_div").append(ui.draggable).sortable();
}
});
});
</script>
I prepend this code:
<li data-role="fieldcontain">
<label for="test">Test</label>
<select class="marktplaatsenSwitch" id="test" data-role="slider" name="test">
<option value="off">OFF</option>
<option '+selected+'value="on">ON</option>
</select>
</li>
Inside of an ul with the id "settings"
And when I call this
$( ".marktplaatsenSwitch" ).on( "change", function(event, ui) {
alert("Test");
});
It does not react on it. But it does work when I have the li already inside the ul. Do I need to do some kind of refresh? I already tried listview("refresh") and selectMenu("refresh", true)
Dont use:
$( ".marktplaatsenSwitch" ).on( "change", function(event, ui) {
alert("Test");
});
correct jQuery syntax is (if you want to access dynamically created event):
$(document).on( "change", ".marktplaatsenSwitch",function(event, ui) {
alert("Test");
});
This way of event binding is called delegated binding, it doesnt card if element exist or don't exist inside the DOM.
I was trying to make a extension of datebox were I first needed to select the date and then click "Choose date".
All works, well almost. When I click the "Choose date" button the content behind the modal window get clicked, and in my case it is a search button.
Anyone know why?
if (o.useSelectDateButton) {
$('Välj datum')
.appendTo(hRow).buttonMarkup({ theme: o.theme, icon: 'check', modal: true, iconpos: 'left', corners: true, shadow: true })
.on(o.clickEvent, function(e) {
if ($(this).jqmData('enabled')) {
w.theDate.set(2, 1).set(1, $(this).jqmData('month')).set(2, $(this).jqmData('date'));
w.d.input.trigger('datebox', { 'method': 'set', 'value': w._formatter(w.__fmt(), w.theDate), 'date': w.theDate });
}
if (w.theDate == new Date()) {
w.theDate.set(2, 1).set(1, $(this).jqmData('month')).set(2, $(this).jqmData('date'));
w.d.input.trigger('datebox', { 'method': 'set', 'value': w._formatter(w.__fmt(), w.theDate), 'date': w.theDate });
}
w.d.input.trigger('datebox', { 'method': 'close' });
});
}
I call the datebox like this:
<input name="datepicker" id="datepicker" type="date" data-role="datebox" data-options='{"mode": "calbox", "calShowWeek": true, "overrideCalStartDay": 1, "useModal": true, "useAltIcon": true, "afterToday": true, "useFocus": true }'>
Added a JsFiddle
Click for fiddle
The problem is that i cant recreate the problem in the browser, it only happens in a mobile device.
can you make fiddle with this?which jquery libraries you use for this?
An another option / alternative:
Take at look at this
its a very simple datetimepicker which jquery libraries and it is very simple to put this to work.
head tag:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
body tag:
<p>Date: <input type="text" id="datepicker" /></p>
Please have a look at this code -
When I click on myLink I get a modal dialog window which shows the html as defined below. This html includes a button (id=test_button), and when I click on this button I want to do an ajax request.
But its not working. So to test it I am just doing an alert but it wont work as well.
Also will it be possible to update existing dom element values (just populate a form) from within a test_button click function.
Thanks for your help.
$('#myLink').click(function(event) {
event.preventDefault();
$('<div id="iContainer">Test: <input type="text" value="" id="test_text" />
<input type="button" id="test_button" value="click" /></div>').appendTo('body');
$("#iContainer").dialog({
width: 600,
modal: true,
close: function(event, ui) {
$("#iContainer").remove();
}
});
});
$('#test_button').click(function() {
alert('I am in Alert');
//alert($('#test_text').val());
});
Try with Events/live:
$('#test_button').live("click", function(){
alert('test');
});
The problem is that you're attempting to attach the click handler before the element exists.
As stated by CMS, you can either use .live() or you can add the click handler in your $('#myLink').click() function
Like so:
$('#myLink').click(function(event) {
event.preventDefault();
$('<div id="iContainer">Test: <input type="text" value="" id="test_text" />
<input type="button" id="test_button" value="click" /></div>').appendTo('body');
$("#iContainer").dialog({
width: 600,
modal: true,
close: function(event, ui) {
$("#iContainer").remove();
}
});
$('#test_button').click(function() {
alert('I am in Alert');
//alert($('#test_text').val());
});
});