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
;
}