I am using jQuery UI autocomplete and it is working fine. Below is the sample code:
<element>.autocomplete({source: availableTags,
position: {
my: "left top",
at: "left bottom",
collision: "flip"
}});
})
and
availableTags = ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"]
Can I add Multiple fields here? Like tags associated with value? For e.g, "java" has associated tag called "language".
How can i setup source in a way that if user search for "java" or they search "language", both should return "java"?
Related
I'm trying to override the default configuration on the Advanced Real-Time Chart TradingView Widget.
I added a simple moving average on which I managed to set the period (from default 9 to 200).
I would like to change the color, but I didn't find any documentation on how to achieve that?
Question 1 : Is there any documentation on how to customize the widget?
Question 2 : Is it possible / how to change the indicators colors?
Here is a snippet of what I'm trying to achieve:
<!-- TradingView Widget BEGIN -->
<div class="tradingview-widget-container">
<div id="tradingview_f7f00"></div>
<div class="tradingview-widget-copyright"><span class="blue-text">AAPL Chart</span> by TradingView</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"width": 980,
"height": 610,
"symbol": "NASDAQ:AAPL",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "light",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
// ==================== BEGIN ====================
"studies": [
{
id: "MASimple#tv-basicstudies",
// This sets the period
inputs: {
length: 200,
},
// This doesn't work...
styles: {
color: '#ff0000',
}
},
],
// ==================== END ====================
"container_id": "tradingview_f7f00"
}
);
</script>
</div>
<!-- TradingView Widget END -->
Refer:
Tradingview Simple Moving Average widget configure
Try like this,
You should use the names of the studies in the Insert Study dialog as they are but using lower case letters.
"studies_overrides": {
"moving average.ma.color": "#2A2E39",
"moving average.ma.linewidth": 2,
},
You need to pass an overrider object to the widget constructor just like you are passing other parameters such as width, or height:
new TradingView.widget({
overrides: {
'paneProperties.background': '#2E2E2E',
}
});
This one would change the background, for example.
To know more about overrides just consult the wiki page of the library, on the overrides section :)
I have a dropdownlist and want to turn it into autocomplete using jquery.
The dropdown looks like this and works:
#Html.DropDownListFor(m => m.CategoryID, new SelectList(Model.Categories, "ID", "Name", Model.CategoryID), "Categories", new { #class = "form-control" })
I also added an autocomplete field using jquery that works. But so far I can only populate it with dummy data:
$(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp"
];
$("#tags").autocomplete({
source: availableTags
});
});
How can I populate my dropdown field with the data that is available in the dropdown?
Thank you in advance!
You need to set the source as an action method which returns data you want to show as autocomplete option in JSON format.
$(function(){
$("#tags" ).autocomplete({
source: "#Url.Action("SearchCategories","Home")",
minLength: 1,
select: function (event, ui) {
//If you want to do something on the select event, you may do it here
//$("#tags").html(ui.item.label);
}
});
})
Make sure you have an action method called SearchCategories in your HomeController which returns the data you want.
public ActionResult SearchCategories(string term)
{
var db= new MyDbContext();
var results = db.Categories.Where(s => s.Name.StartsWith(term))
.Select(x=>new { id =x.Id,
label =x.Name }).ToList();
return Json(results,JsonRequestBehavior.AllowGet);
}
This should enable the autocomplete on an input with id tags,assuming you have jQuery ui library(and it's dependencies) loaded properly in your page and you do not have any other script errors in your page. I have used Url.Action helper method to generate the correct relative url to the action method. It will work fine if your js code is inside a razor view. But if your code is inside an external js file, you should follow the approach described in this post.
I have an input field which has an ajax data source autocomplete attached to it.
I have a keyup handler for the input field, which looks for someone pressing enter and when they do it triggers a click on the search button, which ajax loads some data in another div.
The problem is that if the person is quick and types and presses enter, the autocomplete still pops up.
I have tried the following:
Adding $('#autocomplete').autocomplete('close'). This doesn't work, presumably because the autocomplete isn't open yet. If I type, wait for the autocomplete to come up, then press enter, it closes it correctly.
Adding $('#autocomplete').autocomplete('destroy'). This works, but then if I go back to the field to try another search, the autocomplete no longer works.
So what I want is a way to cancel any pending requests and close the autocomplete if it's open, but without disabling or destroying it.
EDIT: Code sample (not my real code, just stubs to demonstrate the issue). Filename is scratch.php
<?php
// Stub for search results
if ($_GET['search'])
{
print "Search results for ".$_GET['search']." here";
exit();
}
// Simulated DB search
if ($_GET['term'])
{
print '[{"label":"A 1"},{"label":"A 2"},{"label":"A 3"},{"label":"A 4"}]';
exit();
}
?>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link type="text/css" href="http://code.jquery.com/ui/1.10.1/themes/redmond/jquery-ui.css" rel="stylesheet" />
<script language='javascript'>
$(document).ready(function() {
$('#searchfor').on('keyup',function(e) {
if (e.which == 13) $('#search').trigger('click');
});
$('#searchfor').autocomplete({
source: "/scratch.php",
minLength: 2,
select: function( event, ui ) {
$('#searchfor').val(ui.item.value);
$('#search').trigger('click');
}
});
$('#search').on('click',function() {
try
{
// Cancel any pending autocompletes without destroying the autocomplete completely here.
// This currently doesn't work
$('#searchfor').autocomplete("close");
}
catch(e)
{
// Do nothing except prevent an error
}
$('#results').load('scratch?search='+encodeURIComponent($('#searchfor').val()));
});
});
</script>
</head>
<input id='searchfor' /> <input id='search' type='button' value='search' />
<div id='results'></div>
</html>
One way to go about this is to make the input lose focus. You can do this by using .blur(). How about doing something like this:
JAVASCRIPT:
$(document).ready(function() {
$('#searchfor').on('keyup',function(e) {
if (e.which == 13) $('#search').trigger('click');
$('#searchfor').blur();
});
$('#searchfor').autocomplete({
source: "/scratch.php",
minLength: 2,
select: function( event, ui ) {
$('#searchfor').val(ui.item.value);
$('#search').trigger('click');
}
});
$('#search').on('click',function() {
$('#results').load('scratch?search='+encodeURIComponent($('#searchfor').val()));
});
});
DEMO:
http://jsfiddle.net/dirtyd77/dMjRb/3/
In the current verion of jQuery UI you can use the search event to do some checks before the request to the data source is made
https://api.jqueryui.com/autocomplete/#event-search
let autocompleteData = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
333333,
222222,
111111,
123456
];
$('input').autocomplete({
source: autocompleteData,
search:function(e,u){
let value = e.target.value;
// stops the event from continuing if value integer.
if( Number.isInteger(parseInt(value)) ){
e.preventDefault();
}
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<input type="text">
assuming you have a one page app.
you can wrap the input with
<form onsubmit="return false;">...<form>
this will catch the enter key or any event that will trigger submit.
then, you can bind the submit event yourself and do:
$('input').blur().focus();
do something with $('input').val();
I am using jquery ui 1.9 in an ajax based website.
I have the following code:
This is a <span title="Some warning" class="warning">warning</span> message<br />
This is a <span title="Some info" class="info">info</span> message
Using jquery ui tooltip would work, even for dynamic content:
$(function() {
$( document ).tooltip();
});
But I want different tooltip styles for each of this message-types. For example red color for warning and blue for info and it should work for dynamic content too.
Any ideas?
You need to use the toolTipClass property to specify the css class
$(document).ready(function() {
$( ".warning" ).tooltip({
tooltipClass: "warning-tooltip"
});
$( ".info" ).tooltip({
tooltipClass: "info-tooltip"
});
});
First, here is the code that works:
$(function() {
$('#warning-binder-element').tooltip({
items: '.warning',
tooltipClass: 'warning-tooltip',
content: function () {
return $(this).prev('.warning-toast').html();
},
position: {
my: "right bottom",
at: "right top-10"
}
});
$('#info-binder-element').tooltip({
items: '.info',
tooltipClass: 'info-tooltip',
content: function () {
return $(this).closest('.doo-hicky').next('.info-toast').html();
},
position: {
my: "left bottom",
at: "left+10 top-10"
}
});
});
A few notes on the above:
The selector for .tooltip() is not the item you want to have a tooltip pop up on, it is an element on the page that the tooltip object and its associated events are bound to.
If you attempt to bind two tooltips to the same object, only the last one will persist so binding both to $(document) will not work (which is why I have bound the two different tooltip objects to two different elements on the page).
you can bind the tooltip object to the item that will get the tooltip, but if you use a class selector, this may lead to ill effects.
The bug founded when I enter the value to the texbox while I am mouse over the autocomplete menu, when I mouse out the menu the textbox gain the original value even when I put focus: return false.
<label for="tags">Tags: </label>
<input id="tags" />
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
var tags = $("#tags").autocomplete({
source: availableTags,
focus: function(event, ui){
return false;
}
});
availableTags.push("foo");
tags.autocomplete( "option", "source", availableTags);
window.setTimeout(function(){$("#tags").val("BASIC")},10000 );
What I am doing is puttin "BASIC" value after 10 secs and if you have the mouse over the autocomplete menu than when you will mouse out the #tags value will be back to origin and I don't want this to happen.
Can I workaround this?! How?! thanks
It was corrected on the next release so for the moment you have to use:
<script src="http://code.jquery.com/ui/jquery-ui-git.js" type="text/javascript"></script>
and not the downloaded from jquery-ui site.