The author, do not play online games is still four days away from two months. I often feel that the past is unbearable, but now it is not. Sometimes, my mind will come up with a song: "I knew it was like a dream, so I would not put all love in the same place.". There's only one sentence. The repeat of the past, the future, the future, the future, the future, the future. 상처를 입지 않고 타박상을 입지 않도록 고의로 거리를 유지해야합니다.
There are many ways to realize the associative input of input box. Here, I just choose a principle to realize it. As for details optimization, I have different opinions.
1. Using autocomplete: simple implementation code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Text box Association completion plug-in</title>
<link rel="stylesheet" href="css/autocomplete.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="demo">
<div class="wrapper">
<div id="search-form"></div>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'microsoft yahei';">
</div>
</body>
<script type="text/javascript" src="js/jquery.js"></script>
<!-- And jquery.autocomplete.js Different Oh -- >
<script type="text/javascript" src="js/autocomplete.js"></script>
<script>
//Consider getting such data from a database. Personalized data selected by personnel
//Consider, search event user's input data for personalized storage
var proposals = [
'I want to lose weight', 'Weight loss therapy', 'Hunger lose weight',
'Exercise to lose weight', 'red_ant', 'drink',
'beer', 'fruit', 'glove',
'hotel', 'OFO', 'Ha ha ha',
'motorbike', 'It's time to lose weight.', 'Please lose weight.',
'Reduce weight'
];
$(document).ready(function() {
$('#search-form').autocomplete({
hints: proposals,
width: 300,
height: 30,
onSubmit: function(text) {
alert(text);
}
});
});
</script>
</html>2. Effect:
3. Deficiencies:
It can be seen that some of our data such as: drink, beer, fruit and other words with "r" have not been found.
4. Compatibility:
It can be seen that both IE5 and IE5 + are supported.
5. Optimization:
Who uses who optimizes.