HTML | DOM 输入 URL 自动完成属性

Web开发中，经常需要用户输入URL地址，为了方便用户，我们可以使用自动补全功能，让用户只需输入一部分，就能快速地选择地址。本文将介绍如何使用HTML和DOM完成这个功能。

实现原理

实现自动完成功能的关键在于，当用户在输入框中输入一部分字符时，我们需要从服务器查询所有匹配的URL地址，并将它们展示给用户供其选择。因此，我们需要几个组件来完成这个功能：

1. 输入框：用来接受用户输入；
2. 服务器：用来查询所有匹配的URL地址；
3. 展示框：用来展示匹配的URL地址，供用户选择；
4. AJAX：用来从服务器异步地获取URL地址。

HTML代码

首先，让我们先看一下HTML的代码。我们需要一个输入框和一个展示框，它们的id分别为search和suggest。

<input type="text" id="search" onkeyup="search()" />
<ul id="suggest"></ul>

DOM实现

接下来，我们需要用DOM对输入框和展示框进行操作。我们需要用onkeyup事件监听用户输入，并在每次输入时将输入框的值发送到服务器进行查询。查询结果将以JSON格式返回。我们需要将返回的JSON数据解析后，将URL地址显示在展示框中。

function search() {
  var search = document.getElementById("search");
  var suggest = document.getElementById("suggest");
  var value = search.value;

  if (value.length > 0) {
    // 发送AJAX请求
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (xhr.readyState == XMLHttpRequest.DONE) {
        if (xhr.status == 200) {
          // 解析JSON数据
          var data = JSON.parse(xhr.responseText);

          // 显示匹配的URL地址
          suggest.innerHTML = "";
          for (var i = 0; i < data.length; i++) {
            var li = document.createElement("li");
            li.appendChild(document.createTextNode(data[i]));
            suggest.appendChild(li);
          }
        }
      }
    };
    xhr.open("GET", "search.php?q=" + value, true);
    xhr.send();
  } else {
    suggest.innerHTML = "";
  }
}

PHP代码

最后，我们需要用PHP在服务器中查询URL地址。我们可以使用MySQL存储URL地址，并使用LIKE子句进行模糊查询。以下是查询代码：

<?php
$q = $_GET['q'];

$con = mysqli_connect('localhost','root','');
if (!$con) {
  die('Could not connect: ' . mysqli_error($con));
}

mysqli_select_db($con,"url");
$sql="SELECT url FROM urls WHERE url LIKE '".$q."%' ORDER BY url";
$result = mysqli_query($con,$sql);

$rows = array();
while($row = mysqli_fetch_array($result)) {
  $rows[] = $row['url'];
}

echo json_encode($rows);

mysqli_close($con);
?>

总结

到此为止，我们已经完成了HTML和DOM的部分。我们创建了一个输入框和一个展示框，并使用JavaScript监听用户输入。当用户输入时，我们通过AJAX从服务器查询匹配的URL地址，并将结果显示在展示框中。最后，我们使用PHP在服务器中查询URL地址。

以上就是实现自动完成功能的所有代码和原理。希望这篇文章能够帮助各位开发者提升自己的技能。