【原生Javascript案例】原生JS案例之京东搜索框_京东商城官网搜索框用js怎么做

案例效果

相关代码

/**
 * 模块化开发
 */ 

window.onload = function (){
  init();
}

function init() {
  SearchKw();
}

var SearchKw = (function() {
  var oAutoKw = document.getElementById('J_autoKw'),
      oSearch = document.getElementById('J_search_kw'),
      recomKw = JSON.parse(document.getElementById('J_recomkw').innerHTML)
      recomKwIndex = 0
      t = null;


  addEvent(oSearch, 'focus', function() {
    clearInterval(t);
    oAutoKw.style.color = '#ccc';
  });

  addEvent(oSearch, 'blur', function() {
    autoKwShow(this.value, true);
    t = setInterval(autoKw, 1000);
  });

  addEvent(oSearch, 'input', function() {
    autoKwShow(this.value, false);
  });

  addEvent(oSearch, 'propertychange', function() {
    autoKwShow(this.value, false);
  });

  // 判断关键词是否轮播跟颜色状态的切换
  function autoKwShow(val, isBlur) {
    if(val.length > 0) {
      oAutoKw.className = 'auto-kw hide';
    }else if(isBlur) { // 失去焦点
      oAutoKw.className = 'auto-kw show';
      oAutoKw.style.color = '#989898';
    }else {
      oAutoKw.className = 'auto-kw show';
    }
    
  }

  function autoKw () {
    var key = recomKw[recomKwIndex],
        len = recomKw.length;
    oAutoKw.innerHTML = key;
    recomKwIndex = recomKwIndex >= (len - 1) 
                                ? 0 
                                : recomKwIndex + 1;
  }

  function setAutoKw() {
    autoKw();
    t = setInterval(autoKw, 1000);
  }

  return function() {
    setAutoKw();
  };

})();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70

案例源码

源码地址