6 Answers, 1 is accepted
0
Hi Amin,
If I understood you would like to open a link in a new tab/window when user selects item from the AutoComplete. If that is the case please check this sample:
Regards,
Alexander Valchev
Telerik
If I understood you would like to open a link in a new tab/window when user selects item from the AutoComplete. If that is the case please check this sample:
(hint: the autocomplete have two items - Google and Bing)
Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Jnchaves
Top achievements
Rank 1
Rank 1
answered on 11 Nov 2013, 04:02 PM
You are awesome.. Exactly what I wanted.
0
Jnchaves
Top achievements
Rank 1
Rank 1
answered on 11 Nov 2013, 08:18 PM
Hi,
I attempted to move the data into JSON file. No Success. Can you help me look at the code below?
<!DOCTYPE html>
<html>
<head>
<title>KendoUI Test Page</title>
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.dataviz.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
</head>
<body>
<input id="autocomplete" type="text" />
<!-- <script>
$("#autocomplete").kendoAutoComplete({
dataSource: {
data: [
{name: "Google", link: "http://www.google.com/"},
{name: "Bing", link: "http://www.bing.com/"}
]
},
dataTextField: "name",
template: '<span data-href="#:link#">#:name#</span>',
select: function(e) {
var href = e.item.find("span").data("href");
window.open(href);
}
});
</script>
-->
<script>
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "json.txt",
dataType: "json",
data: {
q: "javascript"
}
}
},
schema: {
data: "results"
}
});
$("#autocomplete").kendoAutoComplete({
dataSource: dataSource,
dataTextField: "name",
template: '<span data-href="#:link#">#:name#</span>',
select: function(e) {
var href = e.item.find("span").data("href");
window.open(href);
}
});
</script>
</body>
</html>
JSON FILE:
{
"results": [
{name: "Google", link: "http://www.google.com/"},
{name: "Bing", link: "http://www.bing.com/"}
]
}
I attempted to move the data into JSON file. No Success. Can you help me look at the code below?
<!DOCTYPE html>
<html>
<head>
<title>KendoUI Test Page</title>
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.dataviz.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
</head>
<body>
<input id="autocomplete" type="text" />
<!-- <script>
$("#autocomplete").kendoAutoComplete({
dataSource: {
data: [
{name: "Google", link: "http://www.google.com/"},
{name: "Bing", link: "http://www.bing.com/"}
]
},
dataTextField: "name",
template: '<span data-href="#:link#">#:name#</span>',
select: function(e) {
var href = e.item.find("span").data("href");
window.open(href);
}
});
</script>
-->
<script>
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "json.txt",
dataType: "json",
data: {
q: "javascript"
}
}
},
schema: {
data: "results"
}
});
$("#autocomplete").kendoAutoComplete({
dataSource: dataSource,
dataTextField: "name",
template: '<span data-href="#:link#">#:name#</span>',
select: function(e) {
var href = e.item.find("span").data("href");
window.open(href);
}
});
</script>
</body>
</html>
JSON FILE:
{
"results": [
{name: "Google", link: "http://www.google.com/"},
{name: "Bing", link: "http://www.bing.com/"}
]
}
0
Hello Amin,
The Json which you provided is not valid (you can verify that here).
Please use a valid one:
Regards,
Alexander Valchev
Telerik
The Json which you provided is not valid (you can verify that here).
Please use a valid one:
{ "results": [ { "name": "Google", "link": "http://www.google.com/" }, { "name": "Bing", "link": "http://www.bing.com/" } ]}Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Mithun Prasath
Top achievements
Rank 1
Rank 1
answered on 26 Nov 2013, 05:36 AM
i need a sample for auto complete with jsp, the data for suggestion is from database pls
0
Hello Mithun,
Did you checked the JSP version of the AutoComplete demos?
In addition you can check the AutoComplete JSP Ajax binding help topic:
Regards,
Alexander Valchev
Telerik
Did you checked the JSP version of the AutoComplete demos?
In addition you can check the AutoComplete JSP Ajax binding help topic:
If you have any further questions please post them in the JSP section of the forum.
Thank you in advance for the understanding.
Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!