前沿视角：以jsonp的方式实现模拟百度搜索自动补全下拉

前端

2023-11-15 18:09:07

引言：搜索引擎的演进与自动补全的魅力

搜索引擎作为信息时代的灯塔，引领着人们在浩瀚的网络海洋中寻获所需。从最初的简单关键词匹配，到如今的智能语义分析，搜索引擎不断进化，而自动补全功能更是锦上添花，极大提升了搜索体验。

剖析 JSONP：跨域通信的利器

实现模拟百度搜索自动补全下拉框的关键技术之一是 JSONP（JSON with Padding），它巧妙地利用 <script> 标签无视同源策略的特性，实现跨域通信。JSONP 的工作原理并不复杂，却蕴藏着跨域通信的奥秘。

揭秘事件委托：层层递进的事件处理机制

事件委托是一种事件处理机制，它允许将事件处理程序注册到父元素上，而当子元素发生事件时，父元素也会响应并执行相应的处理程序。事件委托的精髓在于事件冒泡，即事件会从子元素逐层向上冒泡到父元素，从而实现更高效的事件处理。

编码实践：一步步构建模拟搜索引擎

我们将携手构建一个模拟百度搜索自动补全下拉框的程序，从搭建 HTML 结构，到编写 JavaScript 代码，一步步解析实现过程。我们将运用 JSONP 来处理跨域通信，并巧妙地使用事件委托来实现下拉框的动态交互。

代码示例：代码艺术之美

<input type="text" id="search-input" placeholder="搜索内容">
<div id="autocomplete-results" style="display: none;">
  <ul id="autocomplete-list"></ul>
</div>

<script>
  // 模拟百度搜索自动补全接口
  const baiduSuggestURL = 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su';

  // 搜索输入框元素
  const searchInput = document.getElementById('search-input');

  // 自动补全结果容器元素
  const autocompleteResults = document.getElementById('autocomplete-results');

  // 自动补全结果列表元素
  const autocompleteList = document.getElementById('autocomplete-list');

  // 监听搜索输入框的输入事件
  searchInput.addEventListener('input', (event) => {
    // 获取输入框中的值
    const query = event.target.value;

    // 如果输入框为空，则隐藏自动补全结果容器
    if (!query) {
      autocompleteResults.style.display = 'none';
      return;
    }

    // 构造 JSONP 请求的 URL
    const url = `${baiduSuggestURL}?wd=${query}&cb=jsonpCallback`;

    // 创建 `<script>` 元素并将其添加到页面中
    const script = document.createElement('script');
    script.src = url;
    document.body.appendChild(script);
  });

  // 定义 JSONP 回调函数
  window.jsonpCallback = (data) => {
    // 清空自动补全结果列表
    autocompleteList.innerHTML = '';

    // 将自动补全结果添加到列表中
    data.s.forEach((item) => {
      const listItem = document.createElement('li');
      listItem.innerHTML = item;
      autocompleteList.appendChild(listItem);
    });

    // 显示自动补全结果容器
    autocompleteResults.style.display = 'block';
  };

  // 监听自动补全结果容器的点击事件，并隐藏容器
  autocompleteResults.addEventListener('click', () => {
    autocompleteResults.style.display = 'none';
  });
</script>