javascript - 如何?輸入框提示功能?

來源:互聯網
上載者:User
給定一個輸入框,一個搜尋點擊按鈕,當輸入框獲得焦點時提示使用者最近搜尋內容,如何?,有哪些方法。從哪些方面測試以保障其健壯性。

回複內容:

給定一個輸入框,一個搜尋點擊按鈕,當輸入框獲得焦點時提示使用者最近搜尋內容,如何?,有哪些方法。從哪些方面測試以保障其健壯性。

說說思路。
建立一個隱藏的ul列表,待選項在列表裡面。
把曾經的輸入內容以數組的形式儲存在localstorage內。
設定待選列表數組的最大長度,先進後出。
把數組內容提取並渲染到列表上。

建議用localstorage儲存這樣持久性的資料

cookies主要用來驗證身份

使用者搜尋記錄一般存在資料庫中,當使用者開啟你的網站之時,就預設載入最近的記錄到redis等緩衝中,然後輸入框獲得焦點時就觸發js事件,用ajax去從後台獲得相應的資料,後台直接從緩衝中擷取資料返回給前端。緩衝的主要作用是一個使用者在一次搜尋過程中只需觸發一次資料庫操作。使用者搜尋後更新緩衝,當使用者退出網站後,緩衝更新到資料庫。

從簡的話 使用cookie
保證相容 還是cookie
類似用戶端的資料除了放在cookie 還可以考慮記憶體資料庫 如樓上提出的redis 或者 memcached

用cookie記錄使用者最近搜尋字詞,當使用者輸入的時候取cookie並從值中匹配,然後就是提示給使用者了

1,將熱門或近期搜尋內容儲存到json檔案或資料庫中。
2,將搜尋內容放到本地。
3,輸入搜尋內容時用文本相似演算法,輸出與輸入內容相似最高的幾個搜尋內容。

locationStorage儲存使用者的搜尋曆史,然後遍曆出來

  • 相關文章

    聯繫我們

    該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

    如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.