Cara menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi auto-lengkap borang lanjutan

Cara menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi lanjutan pelengkapan automatik borang, anda memerlukan contoh kod khusus

Dalam kebanyakan laman web, Borang adalah salah satu elemen penting untuk pengguna berinteraksi dengan laman web. Walau bagaimanapun, ini boleh menjadi membosankan apabila pengguna kerap perlu memasukkan data yang sama atau serupa ke dalam borang. Untuk meningkatkan pengalaman pengguna, kami boleh menggunakan HTML, CSS dan jQuery untuk melaksanakan ciri lanjutan pelengkapan automatik borang, membolehkan pengguna mengisi borang dengan lebih cepat dan mengurangkan kemungkinan ralat input.

Dalam artikel ini, kami akan memperkenalkan cara membuat borang dengan autolengkap menggunakan HTML, CSS dan jQuery. Kami akan menggunakan contoh senario, dengan mengandaikan kami mencipta borang pendaftaran dengan medan untuk mengisi bandar pengguna. Kami akan menggunakan Ajax dan JSON untuk mendapatkan sumber data bandar, dan kemudian menggunakan jQuery untuk melaksanakan fungsi autolengkap.

Pertama, mari buat struktur HTML. Kami memerlukan kotak input dan senarai lungsur turun untuk memaparkan pilihan autolengkap. Kod HTML adalah seperti berikut:

<input type="text" id="city-input" />
<ul id="city-list"></ul>

Seterusnya, kita perlu menambah gaya pada kotak input dan senarai lungsur. Kita boleh mencapai ini menggunakan CSS. Hanya gaya paling asas disenaraikan di sini, anda boleh melaraskannya mengikut keperluan anda:

#city-input {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
}

#city-list {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: none; /* 初始状态下隐藏下拉列表 */
  border: 1px solid #ccc;
}

Seterusnya, kami perlu mendapatkan sumber data bandar. Di sini kami menganggap bahawa data bandar disimpan dalam fail dalam format JSON bernama cities.json. Struktur data sampel adalah seperti berikut:

[
  {
    "id": 1,
    "name": "北京"
  },
  {
    "id": 2,
    "name": "上海"
  },
  {
    "id": 3,
    "name": "广州"
  }
  // 其他城市数据...
]

Dalam jQuery, sangat mudah untuk menggunakan Ajax untuk mendapatkan data JSON. Kita boleh menggunakan kaedah $.getJSON jQuery untuk mencapai ini. Kod sampel adalah seperti berikut:

$.getJSON("cities.json", function(data) {
  // 处理获取的城市数据
});

Seterusnya, kita perlu menulis kod untuk melaksanakan fungsi auto-lengkap. Apabila pengguna mula menaip dalam kotak input, kita perlu mencetuskan peristiwa untuk memaparkan pilihan autolengkap yang sepadan. Kita boleh menggunakan acara keyup jQuery untuk memantau input pengguna. Kod sampel adalah seperti berikut:

$("#city-input").keyup(function() {
  var searchQuery = $(this).val(); // 获取输入框的值

  if (searchQuery !== "") {
    // 发送Ajax请求获取匹配的城市数据
    $.getJSON("cities.json", function(data) {
      var matchingCities = [];

      // 遍历城市数据，查找匹配的城市
      $.each(data, function(index, city) {
        var cityName = city.name;

        if (cityName.indexOf(searchQuery) !== -1) {
          matchingCities.push(cityName);
        }
      });

      // 显示匹配的城市选项
      showMatchingCities(matchingCities);
    });
  } else {
    // 如果输入框为空，隐藏下拉列表
    hideCityList();
  }
});

Dalam kod di atas, kami menggunakan acara keyup untuk memantau perubahan nilai kotak input. Jika nilai kotak input tidak kosong, kami menghantar permintaan Ajax dan merentasi data bandar untuk mencari bandar yang memenuhi kriteria carian. Kami kemudian memaparkan bandar-bandar ini dalam senarai juntai bawah. Kita juga perlu menulis dua fungsi tambahan, showMatchingCities dan hideCityList Fungsi kedua-dua fungsi ini adalah untuk memaparkan pilihan bandar yang sepadan dan menyembunyikan senarai juntai bawah.

function showMatchingCities(cities) {
  var $cityList = $("#city-list");
  $cityList.empty(); // 清空下拉列表中的选项

  // 遍历匹配的城市，创建选项并添加到下拉列表中
  $.each(cities, function(index, cityName) {
    var $cityOption = $("<li>" + cityName + "</li>");
    $cityList.append($cityOption);
  });

  $cityList.show(); // 显示下拉列表
}

function hideCityList() {
  var $cityList = $("#city-list");
  $cityList.hide(); // 隐藏下拉列表
}

Akhir sekali, kita juga perlu menambah fungsi pengendali untuk acara klik pilihan auto-lengkap supaya bandar yang dipilih diisi ke dalam kotak input. Kod sampel adalah seperti berikut:

$("#city-list").on("click", "li", function() {
  var cityName = $(this).text();
  $("#city-input").val(cityName);
  hideCityList();
});

Dalam kod di atas, kami menggunakan kaedah on jQuery untuk mengendalikan delegasi acara. Apabila pengguna mengklik pada pilihan dalam menu lungsur, kami mendapat nama bandar yang dipilih dan mengisinya ke dalam kotak input. Kemudian kami menyembunyikan dropdown.

Melalui contoh kod di atas, kita boleh melihat cara menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi lanjutan pelengkapan automatik borang. Kod ini boleh dilaraskan dan dikembangkan mengikut keperluan untuk memenuhi senario dan keperluan perniagaan yang berbeza. Dengan mengurangkan usaha dan ralat input pengguna, pelengkapan automatik borang akan meningkatkan pengalaman pengguna dengan ketara. Semoga artikel ini dapat membantu anda!

Atas ialah kandungan terperinci Cara menggunakan HTML, CSS dan jQuery untuk melaksanakan fungsi auto-lengkap borang lanjutan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!