javascript+jquery:利用cookie实现搜索记录

2018-10-1109:43:31WEB前端开发Comments3,655 views1字数 2906阅读模式

需要在客户端保存用户的搜索记录,这样一来,当用户再次点击输入框,就可以自动显示用户最近的输入记录。最终效果如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6533.html

1,默认情况下,用户未输入,显示最近的几条搜索记录:
javascript+jquery:利用cookie实现搜索记录
2,用户输入字符,自动匹配最近的搜索记录:
javascript+jquery:利用cookie实现搜索记录
想法是用一个数组存储用户的输入记录,然后放到cookie中,对搜索记录的所有操作都围绕这个数组进行。思路如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6533.html

  • 1,显示:从cookie中拿到这个数组,从后往前显示内容,因为后面的是最新的;
  • 2,添加:首先监测是否存在,如果存在,就删除原来的,然后把新的添加到数组的最后;
  • 3,删除:直接从数组中删除这条记录。然后更新cookie值。
  • 4,清空:直接把数组清空,然后更新cookie值。

详细代码如下:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6533.html

  1. <scri-pt src="../js/jquery-3.1.1.min.js"></scri-pt>
  2. <scri-pt src="../js/jquery.cookie.js"></scri-pt>
  3. <scri-pt type="text/javascri-pt">
  4. var save_max_len=50;//最多保存50条搜索记录,超过50条,新的记录覆盖最旧的
  5. var display_max_len=7;//下拉框最多显示7条记录
  6. $(document).ready(function() {
  7. showHistory();
  8. //监听搜索框的文本输入,去cookie中查询相关的搜索记录
  9. $("#search_text").bind(’input propertychange’, function() {
  10. showHistory();
  11. });
  12. //历史记录点击事件
  13. $(document).delegate("div.details", "click", function() {
  14. var search_text = $(this).text();
  15. $("#search_text").val(search_text);
  16. search(search_text);
  17. });
  18. });
  19. //显示历史记录
  20. function showHistory() {
  21. var data = new Array();
  22. var cookie=$.cookie("search_history");//获取cookie
  23. if(cookie!=null){
  24. data = JSON.parse(cookie); //从cookie中取出数组
  25. }
  26. $("#history").empty();//清除原来的显示内容,以免重复显示
  27. var str=$("#search_text").val();
  28. if(!str){
  29. str="";
  30. }
  31. if (data != null) {
  32. var len = data.length>display_max_len?display_max_len:data.length;//显示时只显示特定的条数
  33. var limit = data.length-len-1;
  34. for (var i = data.length-1; i >limit ; i--) {
  35. if(data[i].indexOf(str)>-1){//动态创建历史记录条目
  36. var liHtml = ’<li><div class=><i class=></i>’;
  37. liHtml += ’<b class=><a href="javascri-pt:;" onclick="itemClick(’+data[i]+’)">’+data[i]+’</a></b>’;
  38. liHtml += ’</div>’;
  39. liHtml += ’<i class=></i>’;
  40. liHtml += ’</li>’;
  41. $("#history").append(liHtml);
  42. }
  43. }
  44. }
  45. }
  46. //添加历史记录
  47. function addHistory(str) {
  48. var data = new Array();
  49. var cookie=$.cookie("search_history");
  50. if(cookie!=null){
  51. data = JSON.parse(cookie);
  52. }
  53. //如果历史记录中有,就先删除,然后再添加(保持最近搜索的记录在最新),否则,直接添加
  54. var index=-1;
  55. if(data){
  56. index=data.indexOf(str);
  57. }
  58. if(index>-1){
  59. data.splice(index,1);//删除原来的
  60. }
  61. //最多保留save_max_len条记录,超过最大条数,就把第一条删除
  62. if(data && data.length==save_max_len){
  63. data.splice(0,1);
  64. }
  65. data.push(str);
  66. $.cookie(’search_history’, JSON.stringify(data), {expires : 365});//设置一年有效期
  67. }
  68. //删除历史记录
  69. function deleteHistory(index){
  70. var data = new Array();
  71. data = JSON.parse($.cookie("search_history"));
  72. data.splice(index,1);
  73. $.cookie(’search_history’, JSON.stringify(data), {expires : 365});
  74. showHistory();
  75. }
  76. //清空历史记录
  77. function emptyHistory(){
  78. $.cookie(’search_history’, null, {expires : -1});
  79. showHistory();
  80. }
  81. //点击搜索记录条目
  82. function itemClick(str){
  83. $("#search_text").val(str);
  84. search(str);
  85. }
  86. //点击搜索图标
  87. function toSearch() {
  88. var search_text = $("#search_text").val();
  89. if(!search_text){
  90. return;
  91. }
  92. addHistory(search_text);//添加历史记录
  93. search(search_text);//搜索
  94. }
  95. //调用后台进行搜索
  96. function search(search_text){
  97. window.location.href="https://www.csdn.net";
  98. }
  99. </scri-pt>
  100. </head>
  101. <body>
  102. <!-- 头部搜索框及按钮 -->
  103. <div class=>
  104. <div class=>
  105. <div class=>
  106. <a href="javascri-pt:;" class=>取消</a>
  107. <div class=>
  108. <input placeholder="请输入关键词信息搜索" class=>
  109. <a class=></a>
  110. </div>
  111. </div>
  112. </div>
  113. </div>
  114. <div class=></div>
  115. <div class=>
  116. <!-- 头部标题 -->
  117. <div class=>
  118. <ul class=>
  119. <li>
  120. <b class=>搜索记录</b>
  121. <a href="javascri-pt:;" onclick="emptyHistory()" class=></a>
  122. </li>
  123. </ul>
  124. </div>
  125. <!-- 用来显示搜索条目 -->
  126. <div>
  127. <ul id="history">
  128. </ul>
  129. </div>
  130. </div>
  131. </body>
文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/6533.html
  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/6533.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定