2016年2月29日 星期一

Bootstrap 外觀的自動完成選單


jQuery 有一個 Autocomplete 小部件,但它不及用開的 Bootstrap 外型美觀;我今日把它們合而為一。

首先為編寫 Autocomplete.css
.ui-autocomplete {
 position: absolute;
 z-index: 1000;
 cursor: default;
 padding: 0;
 margin-top: 2px;
 list-style: none;
 background-color: #ffffff;
 border: 1px solid #cccccc
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 border-radius: 5px;
 -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
 -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
 box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.ui-autocomplete > li {
  padding: 3px 20px;
}
.ui-autocomplete > li.ui-state-focus {
  background-color: #dddddd;
}
.ui-helper-hidden-accessible {
  display: none;
}

.ui-autocomplete a  {
 color: #555555;
}
.ui-autocomplete a:link  {
 color: #555555;
}
.ui-autocomplete a:hover  {
 color: #337ab7;
 text-decoration: none;
}
.ui-autocomplete a:active  {
 color: #555555;
}
.ui-autocomplete a:visited  {
 color: #555555;
}

在 HTML 加入:
<link type="text/css" rel="stylesheet" href="../__components__/jquery-ui-1.9.2.custom/css/autocomplete.css" />

當然還需要加入 jQuery-ui:
<script type="text/javascript" src="../__components__/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js"></script>

輸入欄的代碼是:
<label for="dashboardModalOutlet">Outlet Name</label>
<input id="dashboardModalOutlet" type="text" class="form-control" placeholder="Outlet Name" data-toggle="tooltip" data-placement="top" title="Outlet Name" /><br>

網頁啟動時會以 AJAX 向服務器索取數據。得到的數據儲存在 _outletArray 中,只有「編號」及「名稱」會用得到。因此建立 _outletIDArray 給 Autocomplete 之用。考慮到從清單點選項目後需要進行處理,還是在 _outletIDArray 中一併加入索引數值。雖然輸入的只是「編號」,但為了方便使用者,選單中每一項目均顯示了「編號」及「名稱」。所以當點擊項目後,數值需要只保留「編號」,因而加入了「select」部份的代碼。
_outletArray = dataArray;

//  Update dashboard auto-outlet-complete content
_outletIDArray = new Array();
for (var i=0; i<_outletArray.length; i++)  {

 var row = _outletArray[i];
 var outletID = row["outletID"];
 var outlet = row["outlet"];

 _outletIDArray[i] = {label:outletID+" ("+outlet+")", idx:i};
}

$("#dashboardModaloutletID").autocomplete({
 source:_outletIDArray,
 select:function(event, ui)  {
  var index = ui.item.idx;
  var row = _outletArray[index];

  var outletID = row["outletID"];
  $(this).val(outletID);

  //  Update outlet name field
  var outlet = row["outlet"];
  $("#dashboardModalOutlet").val(outlet);
  return false;
 }
});

沒有留言: