auto_complete.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
< html >
< head >
     < meta  charset = "UTF-8"  />
     < title >Hello React!</ title >
 
     < link   href = "css/auto_complete.css"  rel = "stylesheet" />
 
     < script  src = "jslib/jquery-1.11.3.min.js" ></ script >
     < script  src = "jslib/react.min.js" ></ script >
     < script  src = "jslib/react-dom.min.js" ></ script >
</ head >
< body >
 
     < div  id = "autocomplete" ></ div >
 
     < script  src = "js/auto_complete.js" ></ script >
 
</ body >
</ html >

js/auto_complete.js

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
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
var  AutoComplete = React.createClass({
     list:[ "apple" , "banana" , "grape" , "org" , "orange" ],
 
     timeout: null ,
 
     getInitialState: function (){
         return  {
             open: null ,
             matchedItems: this .generateLiHtml( this .list)
         }
     },
 
     generateLiHtml: function (list){
         var  matchedItems = [];
     for ( var  i=0;i<list.length;i++){
           
         var  item = React.DOM.li({key:i,onClick: this .clickHandler},list[i]);
 
         matchedItems.push(item);
     }
     return  matchedItems;
     },
 
   clickHandler: function (e){
     e.stopPropagation();
     e.preventDefault();
 
     var  liItem = $(e.target);
 
     var  content = $(liItem).html();
 
     $(ReactDOM.findDOMNode( this )).find( "input" ).val(content);
     this .setState({open: "" });
 
   },
 
 
   keyUpHandler: function (e){
     e.stopPropagation();
 
     clearTimeout( this .timeout);
 
        var  val = e.target.value;
 
        var  that =  this ;
 
     this .timeout = setTimeout( function (){
           var  result = [];
 
         for ( var  i=0;i<that.list.length;i++){
           var  item = that.list[i];
           if (item.startsWith(val)){
             result.push(item);
           }
         }
 
           var  open =  null ;
       if (result.length>0){
             open =  "open" ;
       }
 
       var  matchedItems = that.generateLiHtml(result);
       that.setState({matchedItems:matchedItems,open:open});
     },300);
 
   },
 
   render:  function () {
 
     return   React.DOM.div(
               {className: "auto-complete" },
               React.DOM.input({type: "text" ,onKeyUp: this .keyUpHandler}),
               React.DOM.div(
                 {className: this .state.open},
                 React.DOM.ul( null ,
                   this .state.matchedItems
                 )
               )
             );
   }
});
 
ReactDOM.render(
     React.createElement(AutoComplete),
     $( "#autocomplete" )[0]
);

css/auto_complete.css

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
.auto-complete{
     width : 200px ;
 
}
 
.auto-complete input{
     width : 100% ;
     box-sizing:border-box;
}
.auto-complete>div{
     display : none ;
     padding-top : 10px ;
}
 
.auto-complete>div.open{ display : block ;}
 
.auto-complete>div ul{
     padding : 0 ;
     margin : 0 ;
     list-style-type :  none ;
     border : 1px  solid  #ccc ;
}
 
.auto-complete>div ul li{
     height : 30px ;
     line-height :  30px ;
     border-bottom : 1px  solid  #ccc ;
     padding-left : 10px ;
}
 
.auto-complete>div ul li:hover{
     background-color : #eaeaea ;
     cursor : pointer ;
}
 
.auto-complete>div ul li:last-child{
     border-bottom : none ;
}