Xây dựng thẻ input tích hợp autocomplete và dropdown thay thế cho select

. Admin .

Trong một số mẫu form người ta vẫn thường sử dụng thẻ select để người dùng chọn một dữ liệu trong danh sách các dữ liệu đã được liệt kê sẵn, đi kèm với thẻ select thường sử dụng plugin rất phổ biến có tên Select2. Nếu bạn không muốn sử dụng thẻ select, bạn vẫn có thể sử dụng thẻ input thay thế nhưng vẫn có tính năng autocomplete và dropdown.

Để bắt đầu bài viết ta có 2 đoạn code sau:

Thẻ input tích hợp autocomplete

<form class="light-blue">

  <div class="form-title">Autocomplete</div>

  <div class="form-group mr-10">

    <div class="input-group pd-10 w-60">

      <div class="input-title">Chọn tỉnh, thành phố</div>

      <input autocomplete="off" class="autocomplte focus input-text" name="" placeholder="Tìm kiếm..." spellcheck="false" type="search" value=""/>

      <ul class="content hidden">

        <ul>

          <li>An Giang</li>

          <li>Bà Rịa - Vũng Tàu</li>

          <li>Bạc Liêu</li>

          <li>Bắc Kạn</li>

          <li>Bắc Giang</li>

          <li>Bắc Ninh</li>

          <li>Bến Tre</li>

          <li>Bình Dương</li>

          <li>Bình Định</li>

          <li>Bình Phước</li>

          <li>Bình Thuận</li>

          <li>Cà Mau</li>

          <li>Cao Bằng</li>

          <li>Cần Thơ</li>

          <li>Đà Nẵng</li>

          <li>Đắk Lắk</li>

          <li>Đắk Nông</li>

          <li>Đồng Nai</li>

          <li>Đồng Tháp</li>

          <li>Điện Biên</li>

          <li>Gia Lai</li>

          <li>Hà Giang</li>

          <li>Hà Nam</li>

          <li>Hà Nội</li>

          <li>Hà Tĩnh</li>

          <li>Hải Dương</li>

          <li>Hải Phòng</li>

          <li>Hòa Bình</li>

          <li>Hậu Giang</li>

          <li>Hưng Yên</li>

          <li>Thành phố Hồ Chí Minh</li>

          <li>Khánh Hòa</li>

          <li>Kiên Giang</li>

          <li>Kon Tum</li>

          <li>Lai Châu</li>

          <li>Lào Cai</li>

          <li>Lạng Sơn</li>

          <li>Lâm Đồng</li>

          <li>Long An</li>

          <li>Nam Định</li>

          <li>Nghệ An</li>

          <li>Ninh Bình</li>

          <li>Ninh Thuận</li>

          <li>Phú Thọ</li>

          <li>Phú Yên</li>

          <li>Quảng Bình</li>

          <li>Quảng Nam</li>

          <li>Quảng Ngãi</li>

          <li>Quảng Ninh</li>

          <li>Quảng Trị</li>

          <li>Sóc Trăng</li>

          <li>Sơn La</li>

          <li>Tây Ninh</li>

          <li>Thái Bình</li>

          <li>Thái Nguyên</li>

          <li>Thanh Hóa</li>

          <li>Thừa Thiên - Huế</li>

          <li>Tiền Giang</li>

          <li>Trà Vinh</li>

          <li>Tuyên Quang</li>

          <li>Vĩnh Long</li>

          <li>Vĩnh Phúc</li>

          <li>Yên Bái</li>

        </ul>

      </ul>

    </div>

    <div class="input-group pd-10 w-40">

      <div class="input-title">Chọn quận, huyện</div>

      <input autocomplete="off" class="autocomplte focus input-text" name="" placeholder="Tìm kiếm..." type="search" value=""/>

      <ul class="content hidden">

        <ul>

          <li>Quận 1</li>

          <li>Quận 2</li>

          <li>Quận 3</li>

          <li>Quận 4</li>

          <li>Quận 5</li>

          <li>Quận 6</li>

          <li>Quận 7</li>

          <li>Quận 8</li>

          <li>Quận 9</li>

          <li>Quận 10</li>

          <li>Quận 11</li>

          <li>Quận 12</li>

          <li>Quận Bình Tân</li>

          <li>Quận Bình Thạnh</li>

          <li>Quận Gò Vấp</li>

          <li>Quận Phú Nhuận</li>

          <li>Quận Tân Bình</li>

          <li>Quận Tân Phú</li>

          <li>Quận Thủ Đức</li>

          <li>Huyện Bình Chánh</li>

          <li>Huyện Cần Giờ</li>

          <li>Huyện Củ Chi</li>

          <li>Huyện Hóc Môn</li>

          <li>Huyện Nhà Bè</li>

        </ul>

      </ul>

    </div>

  </div>

</form>

Hiển thị

Autocomplete
Chọn tỉnh, thành phố
Chọn quận, huyện

Thẻ input kết hợp dropdown và autocomplete

<form class="light-blue">

  <div class="form-title">Dropdown & Autocomplete</div>

  <div class="form-group mr-10">

    <div class="input-group pd-10 w-60">

      <div class="input-title">Chọn tỉnh, thành phố</div>

      <input autocomplete="off" class="input-text input-dropdown" name="" placeholder="Chọn..." type="text" value=""/>

      <span class="arrow-down"></span>

      <ul class="content hidden">

        <li class="search"><input autocomplete="off" class="autocomplte input-text" placeholder="Tìm kiếm..." spellcheck="false" type="search" value=""></li>

        <ul>

          <li>An Giang</li>

          <li>Bà Rịa - Vũng Tàu</li>

          <li>Bạc Liêu</li>

          <li>Bắc Kạn</li>

          <li>Bắc Giang</li>

          <li>Bắc Ninh</li>

          <li>Bến Tre</li>

          <li>Bình Dương</li>

          <li>Bình Định</li>

          <li>Bình Phước</li>

          <li>Bình Thuận</li>

          <li>Cà Mau</li>

          <li>Cao Bằng</li>

          <li>Cần Thơ</li>

          <li>Đà Nẵng</li>

          <li>Đắk Lắk</li>

          <li>Đắk Nông</li>

          <li>Đồng Nai</li>

          <li>Đồng Tháp</li>

          <li>Điện Biên</li>

          <li>Gia Lai</li>

          <li>Hà Giang</li>

          <li>Hà Nam</li>

          <li>Hà Nội</li>

          <li>Hà Tĩnh</li>

          <li>Hải Dương</li>

          <li>Hải Phòng</li>

          <li>Hòa Bình</li>

          <li>Hậu Giang</li>

          <li>Hưng Yên</li>

          <li>Thành phố Hồ Chí Minh</li>

          <li>Khánh Hòa</li>

          <li>Kiên Giang</li>

          <li>Kon Tum</li>

          <li>Lai Châu</li>

          <li>Lào Cai</li>

          <li>Lạng Sơn</li>

          <li>Lâm Đồng</li>

          <li>Long An</li>

          <li>Nam Định</li>

          <li>Nghệ An</li>

          <li>Ninh Bình</li>

          <li>Ninh Thuận</li>

          <li>Phú Thọ</li>

          <li>Phú Yên</li>

          <li>Quảng Bình</li>

          <li>Quảng Nam</li>

          <li>Quảng Ngãi</li>

          <li>Quảng Ninh</li>

          <li>Quảng Trị</li>

          <li>Sóc Trăng</li>

          <li>Sơn La</li>

          <li>Tây Ninh</li>

          <li>Thái Bình</li>

          <li>Thái Nguyên</li>

          <li>Thanh Hóa</li>

          <li>Thừa Thiên - Huế</li>

          <li>Tiền Giang</li>

          <li>Trà Vinh</li>

          <li>Tuyên Quang</li>

          <li>Vĩnh Long</li>

          <li>Vĩnh Phúc</li>

          <li>Yên Bái</li>

        </ul>

      </ul>

    </div>

    <div class="input-group pd-10 w-40">

      <div class="input-title">Chọn quận, huyện</div>

      <input autocomplete="off" class="input-text input-dropdown" name="" placeholder="Chọn..." type="text" value=""/>

      <span class="arrow-down"></span>

      <ul class="content hidden">

        <li class="search"><input autocomplete="off" class="autocomplte input-text" placeholder="Tìm kiếm..." spellcheck="false" type="search" value=""></li>

        <ul>

          <li>Quận 1</li>

          <li>Quận 2</li>

          <li>Quận 3</li>

          <li>Quận 4</li>

          <li>Quận 5</li>

          <li>Quận 6</li>

          <li>Quận 7</li>

          <li>Quận 8</li>

          <li>Quận 9</li>

          <li>Quận 10</li>

          <li>Quận 11</li>

          <li>Quận 12</li>

          <li>Quận Bình Tân</li>

          <li>Quận Bình Thạnh</li>

          <li>Quận Gò Vấp</li>

          <li>Quận Phú Nhuận</li>

          <li>Quận Tân Bình</li>

          <li>Quận Tân Phú</li>

          <li>Quận Thủ Đức</li>

          <li>Huyện Bình Chánh</li>

          <li>Huyện Cần Giờ</li>

          <li>Huyện Củ Chi</li>

          <li>Huyện Hóc Môn</li>

          <li>Huyện Nhà Bè</li>

        </ul>

      </ul>

    </div>

  </div>

</form>

Hiển thị

Dropdown & Autocomplete
Chọn tỉnh, thành phố
Chọn quận, huyện

Thêm giao diện cho thẻ input và viết script bằng jquery

<link href='https://thietkeblogspot.github.io/css/contactform.css' rel='stylesheet'/>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>

<script>//<![CDATA[

$('.input-text.focus,.input-dropdown,.arrow-down').click(function(e) {

  e.stopPropagation();

  var $this = $(this);

  var $content = $this.parent().find('ul.content');

  var $li = $this.parent().find('ul.content>ul>li');

  $('.input-dropdown').blur();

  setTimeout(function() {

    $content.removeClass('hidden')

    $('ul.content').not($content).addClass('hidden')

  }, 100);

  $li.click(function() {

    var option = $(this).text();

    $this.val(option);

    $(this).addClass('active');

    $li.not($(this)).removeClass('active');

    $(this).parent().parent().parent().find('.input-text.focus,.input-text.input-dropdown,.input.input-dropdown').attr('value', option);

    $content.addClass('hidden')

  })

})

$('ul.content').click(function(e) {

  e.stopPropagation()

})

$('html').click(function() {

  $('ul.content').addClass('hidden')

})

var typingTimer;

$('.autocomplte').on('keyup', function() {

  clearTimeout(typingTimer);

  var $this = $(this);

  if ($this.val) {

    typingTimer = setTimeout(function() {

      var str = $this.val().toLowerCase();

      var options = $this.parent().parent().find('ul>li');

      if (str != '') {

        for (var i = 0; i < options.length; i++) {

          var option = options.eq(i);

          var name = option.text().toLowerCase();

          var res = name.indexOf(str);

          if (res !== -1) {

            option.removeAttr('class');

          } else {

            option.addClass('hidden');

          }

        }

      } else {

        options.removeAttr('class');

      }

    }, 500);

  }

});

//]]></script>

Đọc thêm: Cách đặt các thẻ input cùng hàng và chia khoảng cách đều nhau

Ví dụ về mẫu form báo giá vé máy bay tích hợp dropdown và autocomplete

Check giá vé máy bay
Ga đi *
Ga đến *
Hạng ghế *
Ngày đi *
Ngày về *
Người lớn *
Trẻ em
Khứ hồi: *
Thông tin liên hệ
Họ tên *
Số điện thoại *
Địa chỉ liên lạc
Địa chỉ email *
Yêu cầu khác
4.2/5 - (68 bình chọn)

Admin
Admin

Viết blog dạo
Liên hệ admin qua Zalo: 0974.858.395

0 Nhận xét

Cùng chuyên mục