<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
meta
name
=
"viewport"
content="
initial-scale
=
1
.0,
maximum-scale
=
1
.0,
user-scalable
=
no
">
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"themes/metro/easyui.css"
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"themes/mobile.css"
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"themes/icon.css"
>
<
script
type
=
"text/javascript"
src
=
"jquery.min.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jquery.easyui.min.js"
>
</
script
>
<
script
type
=
"text/javascript"
src
=
"jquery.easyui.mobile.js"
>
</
script
>
</
head
>
<
body
>
<
div
class
=
"easyui-navpanel"
>
<
header
>
<
div
class
=
"m-toolbar"
>
<
span
class
=
"m-title"
>
DataList group
</
span
>
</
div
>
</
header
>
<
div
id
=
"datalistID"
data-options="
fit: true,
border: false,
lines: true">
</
div
>
</
div
>
<
div
id
=
"divID"
class
=
"easyui-navpanel"
>
<
header
>
<
div
class
=
"m-toolbar"
>
<
span
id
=
"divID-title"
class
=
"m-title"
>
Car Details
</
span
>
<
div
class
=
"m-left"
>
<
a
href
=
"javascript:void(0)"
class
=
"easyui-linkbutton m-back"
plain
=
"true"
outline
=
"true"
onclick
=
"$.mobile.back()"
>
Back
</
a
>
</
div
>
</
div
>
</
header
>
</
div
>
<
script
>
// The listitems can be grouped
var data = [
{ "group": "Group1", "item": "Audi" },
{ "group": "Group1", "item": "Mercedes" },
{ "group": "Group2", "item": "Bentley" },
{ "group": "Group2", "item": "BMW" },
{ "group": "Group3", "item": "Sedan" },
{ "group": "Group3", "item": "SUV" }
];
// jQuery function for datalist
$(function () {
$('#datalistID').datalist({
data: data,
textField: 'item',
groupField: 'group',
textFormatter: function (value) {
return
'<
a
href
=
"javascript:void(0)"
class
=
"datalist-link"
>'
+ value + '</
a
>';
},
/* On click of one row,it takes to the
#divID-title with respective item */
onClickRow: function (index, row) {
$('#divID-title').html(row.item);
$.mobile.go('#divID');
}
})
})
</
script
>
</
body
>
</
html
>