I use jquery ui 1.10.4 to implement the autocomplete, and it work fine.
but now i have to use the jquery ui 1.9.2, but the autocomplete will not work.
1.The search result will not display, so I add the open() and close() function to solved it. Reference by jqueryUI autocomplete menu show effect
2.But the select function not working now, it will direct to the other page before. I write a conosle.log in the select function, but it not show.
Have anyone can help me to solve it?
$("#tags").autocomplete({
enable: true,
delay: 300,
open: function () {
$('ul.ui-autocomplete').addClass('opened');
},
close: function () {
$('ul.ui-autocomplete')
.removeClass('opened')
.css('display', 'block');
},
source: function (request, response) {
// get data
},
select: function (e, ui) {
console.log('TEST');
location.href = "http://domain/Page?id=" + ui.item.data;
},
autoFocus: true
});
It should work, just change ui.item.data by ui.item.value. Don't know why your console.log doesn't work. What version of jquery core do you use?
$("#tags").autocomplete({
enable: true,
delay: 300,
open: function () {
$('ul.ui-autocomplete').addClass('opened');
},
close: function () {
$('ul.ui-autocomplete')
.removeClass('opened')
.css('display', 'block');
},
source: ['apple','banana','orange'],
select: function (e, ui) {
alert(ui.item.value);
},
autoFocus: true
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.2/themes/blitzer/jquery-ui.css"/>
<input id="tags" name="tags" type="text"/>
Related
I have a link which opens a Bootstrap popver. Inside of this popover, I have a text field that I want to use as a Jquery Autocomplete. The problem is, I am unsure how to access the Div ID for the text box that is in the popover -- using conventional methods don't work. My Autocomplete works fine on a standalone page, but not on popover. Please help!
Text: <input type="text" id="add_game_search"/></div>'>Popover
$(document).ready(function () {
$('[data-toggle="add_game"]').popover({
'trigger': 'click',
'html': 'true',
'placement': 'bottom'
});
});
$(document).ready(function () {
$('.add_game_search').autocomplete({
source: function (request, response) {
$.ajax({
global: false,
url: "http://www.google.com",
dataType: "html",
success: function (data) {
response($.map(data, function (item) {
alert("in response");
}));
}
});
}
});
});
js fiddle: http://jsfiddle.net/hwEp6/2/
simplified fs fiddle proving the concept: http://jsfiddle.net/hwEp6/3/
Here the problem is not with jQuery autocomplete or bootstrap. The actual reason is #add_game_search is generated dynamically when you click the Popover which you have not handled.
Change your code as below,
$(document).ready(function () {
$('body').on('click', '#add_game_search', function () {
alert("here");
});
});
JSFiddle
I'm using jQueryUI's tooltip and I get a strange behavior when mouseover or focusout events happen. If you try a lot of times, you'll see, including that the tooltip stops working.
<input id="test" type="text" title="." />
$('#test').tooltip({
disabled: true,
track: false,
show: {
effect: 'highlight'
},
open: function (event, ui) {
var tipElement = $(this);
setTimeout(function () {
$(ui.tooltip).hide();
tipElement.tooltip('disable');
tipElement.tooltip('close');
}, 7000);
}
});
$('#test').on('focusout', function () {
$(this).tooltip("option", "content", 'texto.');
$(this).tooltip('enable');
$(this).tooltip('open');
$(this).focus();
});
Fiddle
Jquery Opens Multiple Dialog boxes in MVC 4.0
In _layout file I have this code:
<script type="text/javascript">
$(function () {
$("#tabs").tabs();
$("#dialog").dialog({
autoopen: false,
height: 600,
width: 800
});
});
</script>
and when I use an Ajax call using this:
success: function (data) {
$("#dialog").html(data);
}
it show a lot more 100 of dialog boxes and keeps opening until closed forcely,
but when I use only
success: function (data) {
alert(data);
}
it shows only 1 alert box containing data,
Please lead me to some Solution,
Try this code
<script type="text/javascript">
function show()
{
$("#dialog").dialog({
autoopen: false,
height: 600,
width: 800
});
}
</script>
success: function (data) {
$("#dialog").html(data);
show();
}
I want to embed the max of my sliders range in an html data parameter. I did some debug, and despite the fact that the data can be accessed and is a number, the slider will still use the default max of 100.
My HTML:
<div class="slider" data-max="10"></div>
<label for="slider_value">Slider Value:</label>
<input type="text" id="slider_value" />
My Javascript:
$(document).ready(function () {
$("div.slider").slider({
min: 0,
max: $(this).data("max"),
slide: function (event, ui) {
$("input#slider_value").val(ui.value);
}
});
});
See this fiddle
When the argument object for slider() is evaluated, this is a reference to the document object, not div.slider. You'd need to find div.slider again or save a reference to it (demo):
$(document).ready(function () {
var div = $("div.slider");
div.slider({
min: 0,
max: div.data("max"),
slide: function (event, ui) {
$("input#slider_value").val(ui.value);
}
});
});
Use the jQuery UI create event with option method to set options dynamically:
$(document).ready(function() {
$('div.slider').slider({
min: 0,
create: function(event, ui) {
$(this).slider('option', 'max', $(this).data('max'));
},
slide: function(event, ui) {
$("input#slider_value").val(ui.value);
}
});
});
I've found here that to overwrite one of the autocomplete events. But can somebody please provide me with example how to do the same?
The appendTo option does indeed work as expected, and if you inspect at the DOM, the <ul> results element will be attached to the element. However, due to absolute positioning generated by jQueryUI, the list still appears directly under the <input>.
That said, you can override the internal _renderItem to directly append results to a completely different element, for example:
HTML
<input id="autocomplete"/>
<div class="test">Output goes here:<br/><ul></ul></div>
JavaScript
$('input').autocomplete({
search: function(event, ui) {
$('.test ul').empty();
},
source: ["something", "something-else"]
}).data('autocomplete')._renderItem = function(ul, item) {
return $('<li/>')
.data('item.autocomplete', item)
.append(item.value)
.appendTo($('.test ul'));
};
I have also created a demo to demonstrate this. Please note that the latest jQuery library has not had jQueryUI tested against it fully, so I am using the previous version which allows me to select to include jQueryUI directly with the jsFiddle options.
<div class="test">Output goes here:<br/></div>
<script>
$("input#autocomplete").autocomplete({
source: ["something", "something-else"],
appendTo: ".text",
position: { my: "left top", at: "left bottom", of: ".test" }
// other options here
});
</script>
I needed more control over where to put the data, so this is how I went about it:
$("#input").autocomplete({
minLength: 3,
source: [
"ActionScript",
"AppleScript",
"Asp"
],
response: function(event, ui) {
console.log(ui.content);
// put the content somewhere
},
open: function(event, ui) {
// close the widget
$(this).autocomplete('close');
}
});
hle's answer worked awesome for me and gives you more flexibility! Here is my test code that was modified by his answer:
$("#autocomplete").autocomplete({
minLength: 3,
source: ["something", "something-else"],
response: function(event, ui)
{
console.log(ui.content);
// put the content somewhere
},
open: function(event, ui)
{
// close the widget
$(this).autocomplete('close');
}
});
Although this question is pretty old but i got a pretty easy solution. No hack, nothing just in jQuery way:
Instead of autocomplete response function, just add response data in div on success
$(document).ready(function () {
$("#book-code-search").autocomplete({
minLength: 2,
delay: 500,
source: function (request, response) {
$.ajax( {
url: "server side path that returns json data",
data: { searchText: request.term, param2 : $("#type").val()},
type: "POST",
dataType: "json",
success: function( data ) {
$("#data-success").html(data.returnedData); //returnedData is json data return from server side response
/* response($.map(data, function (item) {
return {
label: item.FullDesc,
value: item.FullDesc
}
})) */
}
});
}
});
});
<link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div id='data-success' style='color: green;'></div>
<input type='text' placeholder='Enter Book Code' id='book-code-search' />
<input type='hidden' id='type' value='book'>