javascript - 创建搜索时候如何根据输入实时显示输出。
高洛峰
高洛峰 2017-04-10 14:53:45
0
4
435

If you were building a search tool and wanted search results to pop up as you typed, write a function that gets called on every key down but calls the server when the user stops typing for 400ms.

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全員に返信(4)
阿神
//使用jquery编写...

var delay = null;

$('#searchInput').on('keyup', function () {

    if(delay) {
        clearTimeout(delay);
    }

    //判断文字内容长度是否达到最低要求
    var searchKey = $(this).val();
    if (searchKey.length < 2) { return; } 

    //延迟查询api
    delay = setTimeout(function () {
        $.get('/api/search', {searchKey: searchKey}).then(function (data) {
          //填充数据....
          doSomething(data);

          //显示结果列表
          $('#result-list').show();
        });
    }, 400);
});
いいねを押す +0
小葫芦

监听事件 -> 读前端cache ? 构建结果列表 : (发请求拿结果 -> cache并构建结果列表)
400ms 可以用计时器做 delay 处理,根据事件触发情况看是进后面流程还是 clear 掉。

いいねを押す +0
迷茫

哈,我也搞過這種東西,處理辦法也是同樣的。

之所以這樣,是因爲你會發現在用戶高速鍵入的時候發出的請求很多,卻只有最後一個纔有意義。況且實時感也只是在你停頓的時候才能顯現出來。

所以這一 debounce 可以很有效地改善體驗。

具體實現,除了 debounce 就是 ajax,隨便找個庫比如 underscore 都會提供。

原理如樓上代碼,就是對每次事件先 clearTimeout 再 setTimeout。

http://www.glassdoor.com/Interview/If-you-were-building-a-search-tool-and-wanted-search-results-to-pop-up-as-you-typed-but-the-server-call-was-taxing-write-a-QTN_835901.htm

いいねを押す +0
迷茫

用Ajax做

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!