Implementando o preenchimento automático como uma exibição de lista ocultável (demonstração incluída)

A página inicial do meu aplicativo terá uma caixa de pesquisa e uma lista de links úteis abaixo da caixa de pesquisa (favoritos etc.)

Quando alguém digita texto na caixa de pesquisa, desejo que os favoritos desapareçam e apenas os resultados da pesquisa fiquem visíveis.

Eu tenhoimplementou uma prova de conceito aqui usando uma exibição de lista móvel:

$("#local-filterable-listview").kendoMobileListView({
    dataSource: dataSource,
    template: $("#mobile-listview-filtering-template").text(),
    filterable: {
        field: "ProductName",
        operator: "startswith"
    },
    virtualViewSize: 100,
    endlessScroll: true
});

Estou pensando em vez de definir odisplay:hidden do conteúdo da lista, que em vez disso, definirei a fonte de dados como nula. Essa "pode" ser uma abordagem melhor.

Pergunta, questão

Como posso detectar quando há texto (que não seja o espaço reservado) na caixa de pesquisa para que

A fonte de dados pode serdefinir / desarmar como necessário.Os "favoritos" podem ser invisíveis / visíveis conforme necessário

Uma coisa que não tenho certeza é que, quando o texto é digitado na caixa de pesquisa, e depois vinculo a fonte de dados ... qual será o resultado? Os resultados serão filtrados ou precisarei refilter os resultados? (não há método público para filtrar esses resultados na interface do Kendo)

Eu mesmo tentaria isso, mas não sei como detectar se o texto da caixa de pesquisa foi alterado. Eu poderia pesquisar a propriedade text, mas isso parece ser uma solução abaixo do ideal.

questionAnswers(1)

yourAnswerToTheQuestion