jquery easy ui中的自動完成功能

<!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>

在這段代碼中，autocomplete functinality與combobox一起使用。jquery easy ui中的自動完成功能

如何僅使用jQuery easy ui實現自動完成功能。

來源

2013-09-25 jem

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>

來源

2013-11-15 12:03:21

jquery easy ui中的自動完成功能

回答

相關問題