jquery easy ui中的自动完成功能答案

【问题标题】：Auto Complete functionality in jquery easy uijquery easy ui中的自动完成功能
【发布时间】：2013-09-25 12:26:50
【问题描述】：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Basic ComboBox - jQuery EasyUI Demo</title>
    <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../../themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../demo.css">
    <script type="text/javascript" src="../../jquery.min.js"></script>
    <script type="text/javascript" src="../../jquery.easyui.min.js"></script>
    </head>
    <body>
    <h2>Basic ComboBox</h2>
    <div class="demo-info" style="margin-bottom:10px">
    <div class="demo-tip icon-tip"></div>
    <div>Type in ComboBox to try auto complete.</div>
    </div>
    <select class="easyui-combobox" name="state" style="width:200px;">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>       
    <option value="MI">Michigan</option>
    <option value="MN">Minnesota</option> 
    <option value="WI">Wisconsin</option>
    <option value="WY">Wyoming</option>
    </select>

    </body>
    </html>

在此代码中，自动完成功能带有组合框。

如何使用 jquery easy ui 实现仅自动完成功能。

【问题讨论】：

标签： jquery-easyui

【解决方案1】：

http://jsfiddle.net/E5dhY/5/ 检查以下链接，我已经为您创建的同一个下拉菜单实现了自动完成。

你必须包括
1.jquery
2.jquery ui

 <html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>- jsFiddle demo</title>
    <script type='text/javascript' src='//code.jquery.com/jquery-1.9.1.js'></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
    <script type='text/javascript'>
    $(function() {
            var cityArray = ["Alabama", "Alaska", "Arizona", "Arkansas"];
            $(".easyui-combobox").autocomplete({
                source: cityArray
            });
    </script>
    <style type='text/css'>
    </style>

</head>

<body>
    <h2>Basic ComboBox</h2>
    <div class="demo-info" style="margin-bottom:10px">
        <div class="demo-tip icon-tip"></div>
        <div>Type in ComboBox to try auto complete.</div>
    </div>
    Auto Complete Box :
    <input type="autoCompleteBox" class="easyui-combobox" name="state" style="width:200px;">
</body>
</html>

【讨论】：