demo-输入框搜索下拉框出现类似文字信息

最新推荐文章于 2024-02-01 21:36:43 发布

咩有猫腻.

最新推荐文章于 2024-02-01 21:36:43 发布

阅读量345

点赞数

分类专栏：前端后端demo

本文链接：https://blog.csdn.net/DcTbnk/article/details/106531910

版权

前端后端demo 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

在这里插入图片描述
html

	<input type="text" />
    <ul></ul>
    <script src="../ajax01.js"></script>
    <script>
      let oInput = document.querySelector("input");
      let oUl = document.querySelector("ul");
      //后台给我们提供了接口
      //post  case02.php  参数wd 返回一个数组
      oInput.oninput = function () {
        if (this.value == "") {
          oUl.innerHTML = "";
          return;
        }
        var data = { wd: oInput.value };
        ajax({
          type: "post",
          url: "case02.php",
          data: data,
          success: function (data) {
            var str = "";
            data = JSON.parse(data);
            data.forEach((item) => {
              str += `<li>${item}</li>`;
            });
            oUl.innerHTML = str;
          },
        });
      };
    </script>

php

<?php
$kw = $_REQUEST["wd"];
$datas = ["a","aa","aaa","aaaa","aaaaa"];
$newArr = [];
foreach($datas as $item){
    if(substr($item,0,strlen($kw))==$kw){
        array_push($newArr,$item);
    }
}
$json = json_encode($newArr);
echo $json;


?>

ajax01.js

function ajax(obj) {
  // 注意 无论是get还是post 都有相同部分代码
  if (window.XMLHttpRequest) {
    var xhr = new XMLHttpRequest();
  } else {
    var xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }
  //将{username:"aaa",password:111}变成username=aaa&password=111
  var str = "";
  for (var i in obj.data) {
    str += i + "=" + obj.data[i] + "&";
  }
  //将结尾的&替换成空字符
  str = str.replace(/&$/, "");

  //在不同的地方加判断
  //toLowerCase()将字母转小写toUpperCase()将字母转大写
  if (obj.type.toLowerCase() == "get") {
    if (str == "") {
      xhr.open("get", obj.url);
    } else {
      xhr.open("get", obj.url + "?" + str);
    }
    xhr.send();
  }
  if (obj.type.toLowerCase() == "post") {
    xhr.open("post", obj.url);
    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhr.send(str);
  }

  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        var data = xhr.responseText;
        obj.success(data);
      } else {
        if (obj.error) {
          obj.error();
        }
      }
    }
  };
}