or
<
div
data-role
=
"view"
data-layout
=
"app"
data-title
=
"test"
id
=
"pageTest"
>
<
div
class
=
"shadowClass"
>
<
p
style
=
"font-weight: normal;"
>
Some explanation text goes here.
</
p
>
</
div
>
<
div
data-role
=
"content"
>
<
ul
id
=
"listview-program"
></
ul
>
</
div
>
</
div
>
.shadowClass {
background-color: yellow;
-moz-box-shadow:
1px
5px
9px
#000000
;
-webkit-box-shadow:
1px
5px
9px
#000000
;
box-shadow:
1px
5px
9px
#000000
;
}
01.
var
tree = GetTheListOfSuggestionFromSomewhere();
02.
var
data = _.chain(tree)
03.
.map(
function
(t) {
04.
if
(t.parent ===
""
)
05.
return
t.name;
06.
return
undefined;
07.
})
08.
.filter(
function
(t) {
09.
return
typeof
t !==
"undefined"
;
10.
})
11.
.value();
12.
13.
console.log(data);// this log out array of string
14.
15.
var
dataSource =
new
kendo.data.DataSource({
16.
data: data
17.
});
18.
var
input = $(element).data(
"kendoAutoComplete"
) ||
19.
$(element).kendoAutoComplete({
20.
dataSource: tree,
21.
dataTextField:
"path"
,
22.
change:
function
() {
23.
var
path =
this
.value();
24.
console.log(
"selected path "
, path);
25.
26.
},
27.
filter:
"startswith"
,
28.
placeholder:
"Select path..."
,
29.
separator:
""
30.
}).data(
"kendoAutoComplete"
);
31.
32.
$(element)
33.
.change(
function
() {
34.
value($(
this
).val());
35.
console.log(
"new value"
, value());
36.
})
37.
.val(value())
38.
.on(
"keydown"
,
function
(e) {
39.
if
(e.which === 110 || e.which === 190) {
40.
var
path = $(
this
).val() +
"."
;
41.
console.log(
"show the auto complete"
, path);
42.
var
filtered = _.chain(tree)
43.
.filter(
function
(t) {
44.
return
t.parent === path;
45.
})
46.
.map(
function
(t) {
47.
return
t.name;
48.
})
49.
.value();
50.
console.log(filtered);
51.
//input.setDataSource(dataSource);
52.
dataSource.data(filtered);
53.
input.refresh();
54.
}
55.
});