實現autocomplete——[js練習]

時間 2019-12-08

原文原文鏈接

實現 AutoComplete

AutoComplete 是指用戶在文本框輸入前幾個字母或是漢字的時候，該控件就能從存放數據的文本或是數據庫裏將全部以這些字母開頭的數據提示給用戶，供用戶選擇，提供方便。效果以下圖所示：css

基礎準備

已提供基礎的 HTML 和 CSS

在 index.js 文件中定義了變量 data, 變量 data 表示文本提示的範圍數組

// 提示範圍數據 var data = ['apple', 'banana', 'carambola', 'grape', 'lemon', 'orange', 'watermelon'];

題目要求

實現 AutoComplete 的功能邏輯 (可以使用 jQuery)，具體效果以下:html

一、完善 input 框 focus 事件綁定邏輯，當事件觸發時，顯示 .autocomplete 提示框和相應的提示內容，並定位到觸發事件的輸入框的正下方。要求同時只能出現一個 .autocomplete 提示框

二、完善 input 輸入框的 keyup 事件綁定邏輯，同時獲取輸入框內容，修改 .autocomplete 提示框的提示選項內容

三、完善 .autocomplete .item 的 click 事件綁定邏輯，當點擊提示框選項時，填充選項文本數據到相應的input框中

提示

瞭解字符串的 indexOf() 方法，經過使用 indexOf() 判斷是不是匹配提示的的字符。
可以使用 jQuery 的 offset() 返回匹配元素相對於文檔的偏移（位置）。
可以使用 jQuery 的 outerHeight() 獲取元素的當前計算高度值,包括padding，border和選擇性的marginJavaScript indexOf() 方法

截圖來源：http://www.w3school.com.cn/jsref/jsref_indexOf.aspjquery

截圖來源：http://www.w3school.com.cn/jquery/css_offset.asp數據庫

.outerHeight()

參考網址：http://api.jquery.com/outerHeight/api

HTML代碼以下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>實現 autocomplete</title>
</head>
<body>
    <!-- 請在index.js文件中完成練習    -->
    <input type="text">
    <input type="text">
    <ul class="autocomplete">
        <!--提示內容結構以下：<li class="item">apple</li>-->
    </ul>
    <!-- 引入jQuery-->
    <script src="https://7.url.cn/edu/jslib/jquery/1.9.1/jquery.min.js"></script>
</body>
</html>

Index.js初始

// 提示範圍數據
var data = ['apple', 'banana', 'carambola', 'grape', 'lemon', 'orange', 'watermelon'];

// 獲取全部的inputs
var $autocomplete = $('.autocomplete');
var $curInput;
var $window = $(window);
var $body = $(document.body)

/**
 * 一、完善 `input` 框 `focus` 事件綁定邏輯，當事件出發時，設置 `.autocomplete` 提示框顯示，並定位到觸發事件的輸入框的正下方。
 * 注：要求同時只能出現一個 `.autocomplete` 提示框
 */
$body.on('focus', 'input', function() {

});
/**
 * 二、完善 `input` 輸入框的 `keyup` 事件綁定邏輯，同時獲取輸入框內容，修改  `.autocomplete` 提示框的提示選項內容
 */
$body.on('keyup', 'input', function() {

});
/**
 * 三、完善 `.autocomplete .item` 的 `click` 事件綁定邏輯，當點擊提示框選項時，填充選項文本數據到相應的input框中
 */
$body.on('click', '.autocomplete .item', function() {

});

思路：

1. 輸入框 focus 的時候，提示框出如今輸入框正下方，而且只有一個。

首先，輸入框 focus 的時候，要顯示提示框，這裏的難點是計算提示框的位置。數組

經過 jQuery 的 offset() 方法獲取輸入框的 top 和 left,
設置提示框的 left 等於輸入框的 left，
設置提示框的 top 等於輸入框的 top 加上輸入框的高度 (可經過 jQuery 的 outerHeight() 來獲取)
根據輸入框的內容遍歷題目給的提示數據，展現在提示框中。

下面是參考代碼：瀏覽器

$body.on('focus', 'input', function() {
  // 獲取輸入框當前的位置
  var position = $(this).offset();
  var value = $(this).val();
  // 計算 $autocomplete 須要展現的位置
  $autocomplete.css({
    'left': position.left,
    'top': position.top + $(this).outerHeight(),
    'display': 'block'
  });
  // 更新當前的 input 對象
  $curInput = $(this);
  // 展現autoComplete
  autoComplete(value);
});

2. 當輸入框輸入內容的時候，提示框顯示匹配的內容。

咱們在瀏覽器的 keyup 事件回調中，須要作如下幾步：app

獲取用戶的輸入內容，
根據輸入內容，篩選提示數據 data (可以使用 indexOf() )

$body.on('keyup', 'input', function() {
  // 獲取輸入框的值
  var value = $(this).val();
  // 將輸入框的值傳入 autoComplete 函數
  autoComplete(value);
})

/**
* 根據輸入展現匹配的提示內容
*/
function autoComplete(value) {
  var itemsArr = [];
  // 遍歷數據篩選數據
  data.forEach(function (item) {
    // 使用 indexOf 判斷輸入內容與提示內容是否匹配
    if (item.indexOf(value) > -1) {
      itemsArr.push('<li class="item">' + item +'</li>');
    }
  });
  $autocomplete.html(itemsArr.join(''));
}

3. 點擊提示內容時，將被點擊的內容填入輸入框中。

當選項被點擊時，須要作如下幾步：dom

獲取被點擊提示選項和其文本
將提示文本輸入到當前 focus 的輸入框中。

$body.on('click', '.autocomplete .item', function() {
  var itemValue = $(this).text();
  $curInput.val(itemValue);
  $autocomplete.hide();
})

到這裏，就能夠實現題目要求的全部功能了。ide

總結

本題涉及到 dom 操做，元素定位，數組處理，字符串匹配等多方面的內容，比較複雜，可是隻要將問題拆解，一步步實現，其實也不是很難。

完整參考代碼以下：

// 提示範圍數據
var data = ['apple', 'banana', 'carambola', 'grape', 'lemon', 'orange', 'watermelon'];

// 獲取全部的inputs
var $autocomplete = $('.autocomplete');
var $curInput;
var $window = $(window);
var $body = $(document.body);

/**
 * 一、完善 `input` 框 `focus` 事件綁定邏輯，當事件出發時，設置 `.autocomplete` 提示框顯示，並定位到觸發事件的輸入框的正下方。
 * 注：要求同時只能出現一個 `.autocomplete` 提示框
 */
$body.on('focus', 'input', function() {
  // 獲取輸入框當前的位置
  var position = $(this).offset();
  var value = $(this).val();
  // 計算 $autocomplete 須要展現的位置
  $autocomplete.css({
    'left': position.left,
    'top': position.top + $(this).outerHeight(),
    'display': 'block'
  });
  // 更新當前的 input 對象
  $curInput = $(this);
  // 展現autoComplete
  autoComplete(value);
});
/**
 * 二、完善 `input` 輸入框的 `keyup` 事件綁定邏輯，同時獲取輸入框內容，修改  `.autocomplete` 提示框的提示選項內容
 */
$body.on('keyup', 'input', function() {
  var value = $(this).val();
  autoComplete(value);
});
/**
 * 三、完善 `.autocomplete .item` 的 `click` 事件綁定邏輯，當點擊提示框選項時，填充選項文本數據到相應的input框中
 */
$body.on('click', '.autocomplete .item', function() {
  var itemValue = $(this).text();
  $curInput.val(itemValue);
  $autocomplete.hide();
});

/**
 * 優化: 點擊非input的地方則隱藏 $autocomplete
 */
$window.on('click', function(event) {
  var target = event.target;
  if (target.tagName !== 'INPUT') {
    $autocomplete.hide();
  }
});

/**
 * 展現提示框
 * @param [String] value 判斷提示的文本
 */
function autoComplete(value) {
  var itemsArr = [];
  // 遍歷數據篩選數據
  data.forEach(function (item) {
    if (item.indexOf(value) > -1) {
      itemsArr.push('<li class="item">' + item +'</li>');
    }
  });
  $autocomplete.html(itemsArr.join(''));
}

練習出處：https://ke.qq.com

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。