JavaScript

在HTML里面用JS+DOM做一个类似于百度搜索框<比如在输入框随便写一个字符、他会自动弹出一个下拉列表、就相当于词汇联想>
本人初学者、求高手指教！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

在文本框可以使用一个onkeyup事件。文本框下面可以隐藏一个div。
这个隐藏的div没有任何数据以及节点，全部通过js动态更新。
关于数据可以通过ajax技术向服务器获取。     完。
词库不大,且无需保密的话,可以写一个json格式的对象作为字库,这样访问速度可以做到毫无延迟,查询所需时间基本为0
该json字符串可写在js文件中,或xml文件中,谁页面一起加载
其实楼主可以去找相关的jQuery搜索控件，很多的。
网上找一下jquery autocomplete这个插件的资料
初学者就做这个？业务逻辑
接受输入
   ajax后台访问
       访问结果在弹出的div中渲染
<!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>无标题文档</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.0.min.js'></script>
<style type='text/css'>
div, ul, li, p{ margin:0; padding:0; list-style:none;}
.content{margin:0 auto; display:block; width:400px; height:100px;}
.content textarea{ width:400px; height:100px;}
#dialog{ width:200px; height:300px; border:1px solid #000; background:#fff; display:none;}
#dialog ul li{ width:190px; height:25px; line-height:25px; border-bottom:1px solid #666 }
#dialog ul li.selected{ background:blue; color:#fff;}
</style><script type="text/javascript">
//会话打开状态
var OPEN = 0;
//会话关闭状态
var CLOSE = 1;//会话类，用与选择@对象
var Dialog = function( placeholderid ) {

var placeholder = $( document.getElementById( placeholderid ) );

var data;
var maxIndex;
var currentIndex;
var self = this;
var eventState = false;

//按下回车键后触发的事件
this.entered = new Function( 'data', '' );

this.load = function( d ) {
data = d;
maxIndex = data.length - 1;
currentIndex = 0;

this.setDialogText( getHtml() );
refreshDialog();
}

this.show = function( left, top ) {
    placeholder.css({
    'position': 'absolute',
'left': left,
'top': top,
'display': 'block'
});

if( !eventState ) bindKeyEvent();
}

this.getStatus = function() {
    return placeholder.css( 'display' ) == 'none' ? CLOSE : OPEN;
}

this.hide = function() {
    placeholder.hide();
unbindKeyEvent();
}

this.setDialogText = function( text ) {
    placeholder.html( text );
}

var getHtml = function() {
    var html = '';
    for( var i = 0; i < data.length; i ++ ) {
    html += '<li> ' + data[ i ] + ' </li>';
}
html = '<ul>' + html + '</ul>';
html = '<p>关键字：' + data.keywords +'</p>' + html;
return html;
}

var refreshDialog = function() {
    var elItems = placeholder.find( 'ul li' );
elItems.removeClass( 'selected' );
$( elItems[ currentIndex ] ).addClass( 'selected' );
}

var moveNext = function() {
    if( currentIndex == maxIndex ) {
    currentIndex = 0;
} else {
    currentIndex ++;
}

refreshDialog();
}

var movePrev = function() {
    if( currentIndex == 0 ) {
    currentIndex = maxIndex
} else {
    currentIndex --;
}

refreshDialog();
}

var enter = function() {
    self.hide();
var selectedItem = data[ currentIndex ];
self.entered( selectedItem );
}

var keyEvent = function( e ) {
var keycode = e.keyCode;
switch( keycode ) {
//向上
case 38:
movePrev();
break;
//向下
case 40:
moveNext();
break;
//回车
case 13:
enter();
break;
}
}

var bindKeyEvent = function() {
    $(document).bind( 'keydown', keyEvent );
eventState = true;
}

var unbindKeyEvent = function() {
$(document).unbind( 'keydown', keyEvent );
    eventState = false;
}

}</script>
</head><body>
<input type="text" id="txt" size="20" />
<div id="dialog"></div>
<script>
var dialog = new Dialog( 'dialog' );
dialog.entered = function( data ) {
    $( '#txt' ).val( data );
}
$( '#txt' ).bind( 'keyup', function( e ) {
var keycode = e.keyCode;
if( keycode == 38 || keycode == 40 || keycode == 13 ) return;
var data = [
"abcdefg",
"1234567",
"abcdefg",
"1234567",
"abcdefg",
"1234567",
"abcdefg",
"1234567",
"abcdefg",
"1234567"
];
dialog.load( data );
var offset = $( this ).offset();
dialog.show(offset.left, offset.top + 20 )
} );
</script>
</body>
</html>
从以前一个效果中的一部份代码，有楼主想要的效果，给楼主参考
如果你想找一个现有功能去这里 http://jqueryui.com/demos/autocomplete/如果你想知道原理
1 把要提示的数据保存在一个数组里 Arr
2 获取文本框的onkeyup事件把文本框的值传递给一个方法 Autocomplete
3 Autocomplete方法中遍历数组 Arr 找出所有符合条件的值
4 根据这些值生成下拉提示列表、
5 ok