如何用Ajax实现类似百度搜索效果

实现的效果是我们可以利用上下键可以选择从数据库当中循环出来的数据并且搜索栏里面的 input 当中的值会改变成当前选择的元素的值只要告诉我如何利用上下键可以选择元素就可以了谢谢^_^

[url]http://jqueryui.com/demos/autocomplete/#remote-jsonp[/url]

下面有VIEW SOURCE
[code="java"]

<style>
.ui-autocomplete-loading { background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat; }
#city { width: 25em; }
</style>
<script>
$(function() {
    function log( message ) {
        $( "<div/>" ).text( message ).prependTo( "#log" );
        $( "#log" ).attr( "scrollTop", 0 );
    }

    $( "#city" ).autocomplete({
        source: function( request, response ) {
            $.ajax({
                url: "http://ws.geonames.org/searchJSON",
                dataType: "jsonp",
                data: {
                    featureClass: "P",
                    style: "full",
                    maxRows: 12,
                    name_startsWith: request.term
                },
                success: function( data ) {
                    response( $.map( data.geonames, function( item ) {
                        return {
                            label: item.name + (item.adminName1 ? ", " + item.adminName1 : "") + ", " + item.countryName,
                            value: item.name
                        }
                    }));
                }
            });
        },
        minLength: 2,
        select: function( event, ui ) {
            log( ui.item ?
                "Selected: " + ui.item.label :
                "Nothing selected, input was " + this.value);
        },
        open: function() {
            $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
        },
        close: function() {
            $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
        }
    });
});
</script>

Your city: Powered by geonames.org

Result:

The Autocomplete widgets provides suggestions while you type into the field. Here the suggestions are cities, displayed when at least two characters are entered into the field.

In this case, the datasource is the geonames.org webservice. While only the city name itself ends up in the input after selecting an element, more info is displayed in the suggestions to help find the right entry. That data is also available in callbacks, as illustrated by the Result area below the input.

[/code]

jquery.ui.autocomplete.js
去jquery的官网看一看,很简单的一个插件.

http://jqueryui.com/demos/autocomplete/

[url]http://jqueryui.com/demos/autocomplete/#remote[/url]

后台走数据库模糊搜索的话，性能太差。建议使用lucene建立索引。关键字联想信息通过lucene查询。

输入框下面是个DIV,通过捕获鼠标上下键来选中,并且更新输入框里的值.
自己实现也不会很复杂.

不用插件你自己实现比较麻烦,

又要自己写AJAX的东西,
又要重新渲染DOM元素,一天都有可能做不完
用插件很快的

当然也可以找网上别人没用插件自己纯手工JAVASCRIPT 写的自动完成功能

帮你搜了下
[url]http://www.jz123.cn/text/0133852.html[/url]

[url]http://www.jb51.net/article/19017.htm[/url]

自己手写就要看你JAVASCRIPT的基本工了

[url]http://jqueryui.com/demos/autocomplete/#remote [/url]