Bagaimana untuk menulis pemilih wilayah dan bandar menggunakan javascript

Semakin banyak laman web dan aplikasi perlu mengambil kira pilihan wilayah dan bandar pengguna. Menyediakan pemilih wilayah dan bandar yang mesra pengguna bukan sahaja dapat meningkatkan pengalaman operasi pengguna, tetapi juga meningkatkan kepuasan pengguna tapak web. Artikel ini akan menerangkan cara menggunakan JavaScript untuk menulis pemilih wilayah dan bandar serta mengoptimumkannya.

1. Analisis permintaan

Menurut wilayah yang dipilih oleh pengguna, paparkan senarai kawasan bandar di bawah wilayah secara dinamik untuk melengkapkan pemilihan lata wilayah dan bandar. Pada masa yang sama, fungsi berikut perlu dilaksanakan:

1. Maklumat wilayah dan bandar yang terakhir dipilih oleh pengguna akan dipaparkan secara lalai (jika ada).
2. Menyokong pengguna memasukkan nama wilayah dan bandar secara manual untuk pemilihan.
3. Menyokong pemuatan tak segerak data wilayah dan perbandaran untuk mengelakkan masa respons halaman yang panjang.

2. Penyediaan data

Untuk melaksanakan pemilih wilayah dan bandar, kami perlu menyediakan data yang sepadan terlebih dahulu. Anda boleh menggunakan sumber data pihak ketiga, seperti data wilayah dan bandar Alibaba (http://lbs.amap.com/api/javascript-api/download/), atau anda boleh menyusun data itu sendiri. Artikel ini menggunakan sumber data Alibaba sebagai contoh.

Sumber data mengandungi dua fail, iaitu province.json dan city.json. Fail province.json merekodkan nama dan maklumat nombor semua wilayah. Fail city.json merekodkan nama, nombor wilayah dan maklumat nombor bandar semua bandar. Perlu diingatkan di sini bahawa nombor bandar bagi setiap wilayah bermula dari 1.

3. Reka bentuk antara muka

Berdasarkan analisis permintaan, kita perlu mereka bentuk antara muka pemilih terlebih dahulu. Anda boleh menggunakan borang yang serupa dengan senarai drop-down input untuk memaparkan senarai wilayah dan bandar, dan memaparkan senarai bandar di bawah wilayah secara dinamik apabila pengguna memilih wilayah. Kita boleh menggunakan CSS untuk menetapkan gaya Kod khusus adalah seperti berikut:

<style>
  .city-selector {
    position: relative;
    display: inline-block;
    font-size: 14px;
  }
  .city-selector input {
    border: 1px solid #ccc;
    width: 200px;
    padding: 5px;
    outline: none;
    box-sizing: border-box;
  }
  .city-selector .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    border: 1px solid #ccc;
    border-top: none;
    background-color: #fff;
    width: 200px;
    max-height: 200px;
    overflow-y: scroll;
    z-index: 1;
  }
  .city-selector .dropdown li {
    padding: 5px;
    cursor: pointer;
  }
  .city-selector .dropdown li:hover {
    background-color: #f5f5f5;
  }
  .city-selector .dropdown li.selected {
    background-color: #f5f5f5;
    font-weight: bold;
  }
</style>
<div class="city-selector">
  <input type="text" placeholder="请选择省份">
  <ul class="dropdown"></ul>
</div>

4. Laksanakan pemilihan wilayah

Pertama, kita perlu memuatkan data province.json ke halaman secara dinamik dan memberikan semua Senarai nama wilayah. Apabila pengguna memasukkan kandungan dalam kotak input, kami perlu memadankan wilayah yang sepadan secara dinamik melalui javascript dan menjadikan nama wilayah yang dipadankan ke dalam senarai juntai bawah.

<script>
  // 定义全局变量，保存province.json数据
  var PROVINCES = [];
  // 加载province.json数据
  fetch('province.json')
    .then(response => response.json())
    .then(data => {
      PROVINCES = data;
      renderProvinces();
    });
  // 渲染所有省份到下拉列表中
  function renderProvinces() {
    var dropdown = document.querySelector('.city-selector .dropdown');
    // 先清空下拉列表
    dropdown.innerHTML = '';
    // 循环province.json数据，渲染省份名称
    PROVINCES.forEach(province => {
      var li = document.createElement('li');
      li.textContent = province.name;
      li.dataset.id = province.id; // 将省份编号存储在data-id中
      dropdown.appendChild(li);
    });
  }
  // 监听用户输入事件，动态匹配省份名称
  document.querySelector('.city-selector input').addEventListener('input', function() {
    var inputValue = this.value.trim();
    if (inputValue === '') {
      renderProvinces();
      return;
    }
    var dropdown = document.querySelector('.city-selector .dropdown');
    var filteredProvinces = PROVINCES.filter(province => province.name.indexOf(inputValue) >= 0);
    dropdown.innerHTML = '';
    filteredProvinces.forEach(province => {
      var li = document.createElement('li');
      li.textContent = province.name;
      li.dataset.id = province.id;
      dropdown.appendChild(li);
    });
  });
</script>

5. Laksanakan pemilihan lata bandar

Seterusnya, kita perlu melaksanakan fungsi pemilihan lata bandar. Apabila pengguna memilih wilayah, kami perlu memuatkan senarai bandar di bawah wilayah yang sepadan secara dinamik dan memaparkannya dalam senarai juntai bawah.

<script>
  // 监听用户选择省份事件，动态加载相应的城市列表
  document.querySelector('.city-selector .dropdown').addEventListener('click', function(e) {
    var target = e.target;
    if (target.tagName !== 'LI') {
      return;
    }
    // 将用户已选的省份名称和编号存储在input中
    var input = document.querySelector('.city-selector input');
    input.value = target.textContent;
    input.dataset.id = target.dataset.id;
    // 加载相应省份下的城市列表
    loadCities(target.dataset.id);
  });
  // 加载相应省份下的城市列表
  function loadCities(provinceId) {
    fetch('city.json')
      .then(response => response.json())
      .then(data => {
        var cities = data.filter(city => city.provinceId === provinceId);
        renderCities(cities);
      });
  }
  // 渲染城市列表到下拉列表中
  function renderCities(cities) {
    var dropdown = document.querySelector('.city-selector .dropdown');
    // 先清空下拉列表
    dropdown.innerHTML = '';
    // 循环city.json数据，渲染城市名称
    cities.forEach(city => {
      var li = document.createElement('li');
      li.textContent = city.name;
      li.dataset.id = city.id; // 将城市编号存储在data-id中
      dropdown.appendChild(li);
    });
  }
</script>

6. Optimumkan pemilih

Selepas melaksanakan pemilih wilayah dan bandar, kami perlu mempertimbangkan cara mengoptimumkan pemilih untuk meningkatkan pengalaman pengendalian dan prestasi halaman pengguna.

1. Sokong pengguna memasukkan nama wilayah dan bandar secara manual untuk dipilih

Apabila memasukkan nama wilayah dan bandar dalam kotak input untuk pemadanan, kami boleh menetapkan kelewatan untuk input kotak untuk mengelakkan input pengguna Kelajuan terlalu pantas, menyebabkan halaman tidak bertindak balas dalam masa. Pada masa yang sama, kami juga boleh menyediakan mekanisme caching untuk mengelakkan memuatkan data yang sama berulang kali.

<script>
  var PROVINCES = [];
  var CITIES = {};
  var debounceTimer = null;
  // 加载province.json数据
  function loadProvinces() {
    fetch('province.json')
      .then(response => response.json())
      .then(data => {
        PROVINCES = data;
      });
  }
  // 动态匹配省份
  function filterProvinces(inputValue) {
    var dropdown = document.querySelector('.city-selector .dropdown');
    var filteredProvinces = PROVINCES.filter(province => province.name.indexOf(inputValue) >= 0);
    dropdown.innerHTML = '';
    filteredProvinces.forEach(province => {
      var li = document.createElement('li');
      li.textContent = province.name;
      li.dataset.id = province.id;
      dropdown.appendChild(li);
    });
  }
  // 监听用户输入事件
  document.querySelector('.city-selector input').addEventListener('input', function() {
    var inputValue = this.value.trim();
    if (debounceTimer) {
      clearTimeout(debounceTimer);
    }
    if (inputValue === '') {
      renderProvinces();
      return;
    }
    debounceTimer = setTimeout(function() {
      if (PROVINCES.length === 0) {
        loadProvinces();
      } else {
        filterProvinces(inputValue);
      }
    }, 300);
  });
  // 监听用户选择省份事件，动态加载相应的城市列表
  document.querySelector('.city-selector .dropdown').addEventListener('click', function(e) {
    var target = e.target;
    if (target.tagName !== 'LI') {
      return;
    }
    var input = document.querySelector('.city-selector input');
    input.value = target.textContent;
    input.dataset.id = target.dataset.id;
    var provinceId = target.dataset.id;
    if (CITIES[provinceId]) {
      renderCities(CITIES[provinceId]);
    } else {
      loadCities(provinceId);
    }
  });
  // 加载相应省份下的城市列表
  function loadCities(provinceId) {
    fetch('city.json')
      .then(response => response.json())
      .then(data => {
        var cities = data.filter(city => city.provinceId === provinceId);
        CITIES[provinceId] = cities;
        renderCities(cities);
      });
  }
</script>

2. Menyokong pemuatan tak segerak bagi data wilayah dan perbandaran

Apabila halaman dimuatkan, kami hanya boleh memuatkan data awal yang diperlukan dan meletakkan pemuatan wilayah dan perbandaran data Pemprosesan tak segerak di latar belakang. Apabila pengguna memilih wilayah, kami memuatkan data bandar wilayah yang sepadan secara dinamik untuk mengelakkan masa respons halaman yang panjang.

<script>
  var debounceTimer = null;
  // 加载所有省份到下拉列表中
  function loadProvinces() {
    fetch('province.json')
      .then(response => response.json())
      .then(data => {
        renderProvinces(data);
      });
  }
  // 渲染所有省份到下拉列表中
  function renderProvinces(provinces) {
    var dropdown = document.querySelector('.city-selector .dropdown');
    dropdown.innerHTML = '';
    provinces.forEach(province => {
      var li = document.createElement('li');
      li.textContent = province.name;
      li.dataset.id = province.id;
      dropdown.appendChild(li);
    });
  }
  // 加载相应省份下的城市列表
  function loadCities(provinceId) {
    fetch('city.json')
      .then(response => response.json())
      .then(data => {
        var cities = data.filter(city => city.provinceId === provinceId);
        renderCities(cities);
      });
  }
  // 渲染城市列表到下拉列表中
  function renderCities(cities) {
    var dropdown = document.querySelector('.city-selector .dropdown');
    dropdown.innerHTML = '';
    cities.forEach(city => {
      var li = document.createElement('li');
      li.textContent = city.name;
      li.dataset.id = city.id;
      dropdown.appendChild(li);
    });
  }
  // 监听用户输入事件
  document.querySelector('.city-selector input').addEventListener('input', function() {
    var inputValue = this.value.trim();
    if (debounceTimer) {
      clearTimeout(debounceTimer);
    }
    if (inputValue === '') {
      loadProvinces();
      return;
    }
    debounceTimer = setTimeout(function() {
      fetch('province.json')
        .then(response => response.json())
        .then(data => data.filter(province => province.name.indexOf(inputValue) >= 0))
        .then(filteredData => {
          renderProvinces(filteredData);
        });
    }, 300);
  });
  // 监听用户选择省份的事件
  document.querySelector('.city-selector .dropdown').addEventListener('click', function(e) {
    var target = e.target;
    if (target.tagName !== 'LI') {
      return;
    }
    var input = document.querySelector('.city-selector input');
    input.value = target.textContent;
    input.dataset.id = target.dataset.id;
    loadCities(target.dataset.id);
  });
  // 页面加载时，只加载必要的初始数据
  loadProvinces();
</script>

7. Ringkasan

Artikel ini memperkenalkan cara menggunakan javascript untuk melaksanakan pemilih wilayah dan bandar serta cara mengoptimumkan pemilih untuk meningkatkan pengalaman pengendalian dan prestasi halaman pengguna. Melaksanakan pemilih wilayah dan bandar yang mesra pengguna bukan sahaja isu teknikal, tetapi juga memerlukan mengambil kira tabiat dan keperluan pengguna, serta masa respons halaman dan isu prestasi. Kami berharap artikel ini dapat memberi anda sedikit rujukan dan bantuan.

Atas ialah kandungan terperinci Bagaimana untuk menulis pemilih wilayah dan bandar menggunakan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!