I'm trying to get Twitter's typeahead to work, but can't figure out how. As far as my knowledge goes, I've included the files correctly, but it still won't work.
My code looks like this:
<!DOCTYPE html>
<html ng-app = "IndexApp">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<title></title>
</head>
<body>
<input id="search"/>
<!--jQuery-->
<script src = "http://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript"></script>
<!--typeahead-->
<script src = "./views/js/typeahead.bundle.js" type="text/javascript"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!--index.css script-->
<link rel="stylesheet" href="./views/css/index.css" media="screen" title="no title" charset="utf-8">
<!--Index.js-->
<script src = "./views/js/index.js" type="text/javascript"></script>
</body>
</html>
index.js
var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];
$(document).ready(function() {
$('#search').typeahead({source: states});
})
JS fiddle sample (click):
var states = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: states
});
Related
I need to test a api where :
API Url
http://api.mydomain.loc:20109/v1/
API Definition URL
http://api.mydomain.loc:20109/v1/swagger/swagger.json
The API definition is :
{
"openapi": "3.0.1",
"info": {
"title": "***",
"description": "***",
"version": "v1"
},
"servers": [
{
"url": "/v1/path1/path2"
}
],
"/ressource1": {
"get": {
"responses": {
"200": {
"description": "Success"
}
}
}
},
...
}
I follow this part unpkg in the documentation to start a local Swagger UI. I create the file "swagger-ui.html" with this content :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="SwaggerIU"
/>
<title>SwaggerUI</title>
<link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist#4.5.0/swagger-ui.css" />
</head>
<body>
<div id="swagger-ui"></div>
<script src="https://unpkg.com/swagger-ui-dist#4.5.0/swagger-ui-bundle.js" crossorigin></script>
<script>
window.onload = () => {
window.ui = SwaggerUIBundle({
url: 'http://api.mydomain.loc:20109/v1/swagger/swagger.json',
dom_id: '#swagger-ui',
});
};
</script>
</body>
</html>
When I open the page, the API definition is correctly loaded and Swagger UI displayed. But when I try out the endpoint "ressource1", Swagger UI call "http://api.mydomain.loc:20109/v1/path1/path2/ressource1". In my case, I want to call "http://api.mydomain.loc:20109/v1/ressource1".
How override the base path in Swagger UI with unpkg?
Here's another solution that uses a plugin with rootInjects. The main idea is the same as in #vernou's answer - update the OpenAPI definition dynamically.
<!-- index.html -->
<script>
const UrlMutatorPlugin = (system) => ({
rootInjects: {
setServer: (server) => {
const jsonSpec = system.getState().toJSON().spec.json;
const servers = [{url: server}];
const newJsonSpec = Object.assign({}, jsonSpec, { servers });
return system.specActions.updateJsonSpec(newJsonSpec);
}
}
});
window.onload = function() {
const ui = SwaggerUIBundle({
url: "http://api.mydomain.loc:20109/v1/swagger/swagger.json",
...
// Add UrlMutatorPlugin to the plugins list
plugins: [
SwaggerUIBundle.plugins.DownloadUrl,
UrlMutatorPlugin
],
// This will set appropriate data when Swagger UI is ready
onComplete: () => {
window.ui.setServer("http://api.mydomain.loc:20109/v1")
}
});
window.ui = ui;
};
</script>
Swagger UI has the parameter spec :
spec : A JavaScript object describing the OpenAPI definition. When used, the url parameter will not be parsed. This is useful for testing manually-generated definitions without hosting them.
The solution is to load manually the api definition, edit the definition and pass the edited definition to Swagger UI.
Example for json OpenApi Specification :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="SwaggerIU"
/>
<title>SwaggerUI</title>
<link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist#4.5.0/swagger-ui.css" />
</head>
<body>
<div id="swagger-ui"></div>
<script src="https://unpkg.com/swagger-ui-dist#4.5.0/swagger-ui-bundle.js" crossorigin></script>
<script>
const swaggerUrl = "http://api.mydomain.loc:20109/v1/swagger/swagger.json"
const apiUrl = "http://api.mydomain.loc:20109/v1/"
window.onload = () => {
let swaggerJson = fetch(swaggerUrl).then(r => r.json().then(j => {
j.servers[0].url = apiUrl;
window.ui = SwaggerUIBundle({
spec: j,
dom_id: '#swagger-ui',
});
}));
};
</script>
</body>
</html>
Example for yaml OpenApi Specification :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
name="description"
content="SwaggerIU"
/>
<title>SwaggerUI</title>
<link rel="stylesheet" href="https://unpkg.com/swagger-ui-dist#4.15.5/swagger-ui.css" />
</head>
<body>
<div id="swagger-ui"></div>
<script src="https://unpkg.com/swagger-ui-dist#4.15.5/swagger-ui-bundle.js" crossorigin></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.js" crossorigin></script>
<script>
const swaggerUrl = "http://api.mydomain.loc:20109/v1/swagger/swagger.yaml"
const apiUrl = "http://api.mydomain.loc:20109/v1/"
window.onload = () => {
let swaggerJson = fetch(swaggerUrl).then(r => r.text().then(t => {
let j = jsyaml.load(t);
j.servers[0].url = apiUrl;
window.ui = SwaggerUIBundle({
spec: j,
dom_id: '#swagger-ui',
});
}));
};
</script>
</body>
</html>
You can copy this code and just edit the value in swaggerUrl and apiUrl.
I am using the org.doctales.reveal DITA Open Toolkit plugin. I understand how to use the outputclass attribute on an element in a DITA topic to transform that element to a fragment in the resulting reveal.js html file.
But what about other reveal.js attributes, such as data-autoslide? I want to apply that attribute to an element in the DITA topic so that I can control the timing of fragments displaying on the reveal.js slide. Is there a way to do this?
To be clear, I am not asking about the args.reveal.autoslide plugin parameter. I have that set to apply to all slides and fragments. Rather, I want to control the timing of individual fragments.
What I have done so far:
I have the following DITA XML topic:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE task PUBLIC "-//OASIS//DTD DITA Task//EN" "task.dtd">
<task id="t_Portal-Dashboard" xtrf="t_Portal-Dashboard">
<title>Viewing The Client Portal Dashboard</title>
<shortdesc>The dashboard provides a summary of activities.</shortdesc>
<taskbody>
<context id="context_fnf_xhv_5cb">The dashboard provides a summary of activities.</context>
<steps>
<step outputclass="fragment fade-in">
<cmd>If the dashboard is not displayed, click <uicontrol>Dashboard</uicontrol>.</cmd>
<stepresult>
<image placement="break" href="i_Portal-Dashboard-Tab-183.png" id="image_c52_1gf5_jwx" width="664px" height="190px" outputclass="fragment fade-in"/>
</stepresult>
</step>
<step outputclass="fragment fade-in">
<cmd>View the summary of information.</cmd>
<stepresult>
<image placement="break" href="i_Portal-Dashboard-Data-183.png" id="image_c52_1gs5_jwx" width="800px" height="520px" outputclass="fragment fade-in"/>
</stepresult>
</step>
</steps>
</taskbody>
</task>
The Doctales DITA-OT plugin transforms to the following HTML:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "about:legacy-compat">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="(C) Copyright 2019" />
<meta name="DC.rights.owner" content="(C) Copyright 2019" />
<meta name="DC.Type" content="concept" />
<meta name="DC.Title" content="Client Portal" />
<meta name="abstract" content="Information and configuration for activities is available from a web application portal." />
<meta name="description" content="Information and configuration for activities is available from a web application portal." />
<meta name="DC.Format" content="XHTML" />
<link rel="stylesheet" type="text/css" href="commonltr.css" />
<link rel="stylesheet" type="text/css" href="doctales.css" />
<title>Client Portal</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
<link rel="stylesheet" href="css/reveal.css" />
<link rel="stylesheet" href="css/theme/doctales.css" id="theme" />
<link href="lib/css/zenburn.css" rel="stylesheet" />
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h1 class="title topictitle1" id="ariaid-title2">Viewing The Client Portal Dashboard</h1>
<div class="body taskbody">
<div class="section context" id="t_Portal-Dashboard__context_fnf_xhv_5cb">The dashboard provides a summary of activities.</div>
<ol class="ol steps">
<li class="li step stepexpand fragment fade-in">
<span class="ph cmd">If the dashboard is not displayed, click <span class="ph uicontrol">Dashboard</span>.</span>
<div class="itemgroup stepresult">
<br />
<img class="image fragment fade-in" id="t_Portal-Dashboard__image_c52_1gf5_jwx" src="i_Portal-Dashboard-Tab-183.png" width="664" height="190" />
<br />
</div>
</li>
<li class="li step stepexpand fragment fade-in">
<span class="ph cmd">View the summary of information.</span>
<div class="itemgroup stepresult">
<br />
<img class="image fragment fade-in" id="t_Portal-Dashboard__image_c52_1gs5_jwx" src="i_Portal-Dashboard-Data-183.png" width="800" height="520" />
<br />
</div>
</li>
</ol>
</div>
</section>
</div>
</div>
<script src="lib/js/head.min.js" type="text/javascript"></script>
<script src="js/reveal.js" type="text/javascript"></script>
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
Reveal.initialize({
// parallaxBackgroundHorizontal: null,
// parallaxBackgroundImage: '',
// parallaxBackgroundSize: '',
// parallaxBackgroundVertical: null,
autoSlide: 3000,
autoSlideStoppable: false,
backgroundTransition: 'default',
center: true,
controls: false,
controlsLayout: 'edges',
embedded: false,
fragments: true,
height: 700,
hideAddressBar: true,
history: true,
keyboard: true,
loop: false,
margin: 0.1,
maxScale: 1.5,
minScale: 0.2,
mouseWheel: false,
overview: true,
previewLinks: false,
progress: true,
rtl: false,
slideNumber: false,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
touch: true,
transition: 'fade',
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
transitionSpeed: 'default',
viewDistance: 3,
width: 960,
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
Reveal.addEventListener( 'slidechanged', function( event ) {
zoomSection();
} );
$( document ).ready(function() {});
</script>
</body>
</html>
But I want to the plugin to read (data-autoslide) attributes I've added to the DITA topic and so transform to something like the following HTML:
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "about:legacy-compat">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="(C) Copyright 2019" />
<meta name="DC.rights.owner" content="(C) Copyright 2019" />
<meta name="DC.Type" content="concept" />
<meta name="DC.Title" content="Client Portal" />
<meta name="abstract" content="Information and configuration for activities is available from a web application portal." />
<meta name="description" content="Information and configuration for activities is available from a web application portal." /> <meta name="DC.Format" content="XHTML" />
<meta name="DC.Identifier" content="concept_Client-Report-Portal" />
<link rel="stylesheet" type="text/css" href="commonltr.css" />
<link rel="stylesheet" type="text/css" href="doctales.css" />
<title>Client Portal</title>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui" />
<link rel="stylesheet" href="css/reveal.css" />
<link rel="stylesheet" href="css/theme/doctales.css" id="theme" />
<link href="lib/css/zenburn.css" rel="stylesheet" />
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section>
<h1 class="title topictitle1" id="ariaid-title2">Viewing The Client Portal Dashboard</h1>
<div class="body taskbody">
<div class="section context" id="t_Portal-Dashboard__context_fnf_xhv_5cb">The dashboard provides a summary of activities.</div>
<ol class="ol steps">
<li class="li step stepexpand fragment fade-in">
<span class="ph cmd">If the dashboard is not displayed, click <span class="ph uicontrol">Dashboard</span>.</span>
<div class="itemgroup stepresult">
<br />
<img class="image fragment fade-in" data-autoslide="8000" id="t_Portal-Dashboard__image_c52_1gf5_jwx" src="i_Portal-Dashboard-Tab-183.png" width="664" height="190" />
<br />
</div>
</li>
<li class="li step stepexpand fragment fade-in" data-autoslide="1000">
<span class="ph cmd">View the summary of information.</span>
<div class="itemgroup stepresult">
<br />
<img class="image fragment fade-in" id="t_Portal-Dashboard__image_c52_1gs5_jwx" src="i_Portal-Dashboard-Data-183.png" width="800" height="520" />
<br />
</div>
</li>
</ol>
</div>
</section>
</div>
</div>
<script src="lib/js/head.min.js" type="text/javascript"></script>
<script src="js/reveal.js" type="text/javascript"></script>
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
Reveal.initialize({
// parallaxBackgroundHorizontal: null,
// parallaxBackgroundImage: '',
// parallaxBackgroundSize: '',
// parallaxBackgroundVertical: null,
autoSlide: 3000,
autoSlideStoppable: false,
backgroundTransition: 'default',
center: true,
controls: false,
controlsLayout: 'edges',
embedded: false,
fragments: true,
height: 700,
hideAddressBar: true,
history: true,
keyboard: true,
loop: false,
margin: 0.1,
maxScale: 1.5,
minScale: 0.2,
mouseWheel: false,
overview: true,
previewLinks: false,
progress: true,
rtl: false,
slideNumber: false,
theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
touch: true,
transition: 'fade',
transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
transitionSpeed: 'default',
viewDistance: 3,
width: 960,
// Optional libraries used to extend on reveal.js
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
{ src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
]
});
Reveal.addEventListener( 'slidechanged', function( event ) {
zoomSection();
} );
$( document ).ready(function() {});
</script>
</body>
</html>
welcome to Stackoverflow. You can find a list of all currently supported parameters in the documentation. If you want to request new parameters, that are supported by reveal.js but not directly through the plugin, please raise an issue on Github. The autoslide function is supported by setting the args.reveal.autoslide property as explained in the docs. You are welcome to join our Slack group for discussing anything the plugin and other things.
My site want to use a function when xAxis.afterSetExtremes. But in IE7, when I am selecting a range in xAxis, the selecting cannot be stoped by the second click. Why?
This problem only happened in IE7.
The test page is: Here
The whole code is:
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/css/huidu.css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="/js/html5shiv.min.js"></script>
<script src="/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-body">
<div id="diantui" style="min-width:300px;height:400px">
</div>
</div>
</div>
<script>
function togglePlotbands() {
this.plotLinesAndBands.forEach(function(plotband) {
var ii = 1;
});
}
window.onload = function(){
var all_data = [];
all_data.push({x:1495641600000 , y: 1});
all_data.push({x:1497110300000 , y: 3});
all_data.push({x:1497210300000 , y: 4});
all_data.push({x:1497410300000 , y: 3});
all_data.push({x:1497510300000 , y: 2});
all_data.push({x:1497715300000 , y: 1});
all_data.push({x:1500134400000 , y: 2});
var hc_obj = {
chart: {
type: 'line',
zoomType: 'x',
renderTo: 'diantui',
events: {
load: function() {
togglePlotbands.call(this.xAxis[0]);
}
}
},
xAxis: {
plotBands: [
{color: '#FFFFEF',from: 1497110400000,to: 1497715200000,label: {text: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxfsdfsfsdfsfsdf'}}
],
events: {
afterSetExtremes: togglePlotbands
}
},
plotOptions: {
line: {
connectNulls: true,
marker: {
enabled: false
},
}
},
series: [
]
};
hc_obj['series'].push({name: 'xxx', data: all_data, visible: true});
var chart = new Highcharts.Chart(hc_obj);
}
</script>
</div>
<script src="//cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="http://cdn.hcharts.cn/highcharts/highcharts.js"></script>
<script src="http://cdn.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
I have used code from http://jqueryui.com/autocomplete/#default which is working fine in FF and Chrome but not working for IE8 version 8.0.7600.16385. The developer console states
'null' is null or not an object
What's wrong?
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Web.XXX.XXX.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function ()
{
var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];
$("#tags").autocomplete({ source: availableTags });
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input type="text" id="tags" />
</div>
</form>
</body>
</html>
It is resolved with using internal Jquery files and noconflict function.
<script src="/JqueryPlugins/ui/jquery.ui.core.js" type="text/javascript"></script>
<script src="/JqueryPlugins/ui/jquery.ui.widget.js" type="text/javascript"></script>
<script src="/JqueryPlugins/ui/jquery.ui.position.js" type="text/javascript"></script>
<script src="/JqueryPlugins/ui/jquery.ui.autocomplete.js" type="text/javascript"></script>
<script>
$J = jQuery.noConflict();
$J(function ()
{
var availableTags = ["ActionScript", "AppleScript", "Asp", "BASIC", "C", "C++", "Clojure", "COBOL", "ColdFusion", "Erlang", "Fortran", "Groovy", "Haskell", "Java", "JavaScript", "Lisp", "Perl", "PHP", "Python", "Ruby", "Scala", "Scheme"];
$J("#tags").autocomplete({ source: availableTags });
});
</script>
How to get source to Jquery Autocomplete UI from classic asp page?
i found that default code. But i want to take my results from another asp page. How may i send with asp and get jQuery?
I need little help.
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
</body>
</html>
one solution is to response write the data directly to the output.
e.g. this is how your classic asp:
I have no way to run this code but it should look something like that...
<%
function getListOfTags()
{
try
{
var objRs = new ActiveXObject("ADODB.Recordset");
}
catch (e)
{
alert("ADODB namespace not found.");
exit(0);
}
strTagList = "";
strConn = "Provider=" +DP+
";Initial Catalog=" +DB+
";Data Source=" +DS+
";Integrated Security=SSPI;"
strComm = "SELECT ProductID,ProductName,UnitPrice "+
"FROM Products " +
"WHERE CategoryID = 7" // select Produce
objRs.open(strComm, strConn, adOpenForwardOnly, adLockReadOnly, adCmdText);
objRs.MoveFirst();
while (objRs.EOF != true)
{
strTagList += '"'+objRs("TagName")+'",'
objRs.MoveNext();
}
objRs.Close
objRs = null;
return (strTagList);
}
%>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
var availableTags = [
<%= getListOfTags() %>
];
$( "#tags" ).autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
</body>
</html>
You can use a remote data source for jQuery auto-complete.
Check this EXAMPLE on jQuery.com
$( "#birds" ).autocomplete({
source: "search.asp",
minLength: 2,
select: function( event, ui ) {
log( ui.item ?
"Selected: " + ui.item.value + " aka " + ui.item.id :
"Nothing selected, input was " + this.value );
}
});
Here search.asp is a page that returns you the list of items in JSON format.