在自动完成中更改 'term'

Question

我想要两个不同的文本框，根据第一个文本框的结果自动完成第二个文本框。

例如，在文本框 1 中开始输入 "un"，所有以 "un" 开头的国家/地区将自动出现，select 美国，在第二个文本框开始输入 "m" 并且只有美国境内以 "m" 开头的州会自动出现。

我的 JS 文件：

var suggest = {
  instance : {}, // attached instances
  focus : null, // current text field in focus

  attach : function (opt) {
  // suggest.attach () : attach autosuggest to input field
  // opt : options
  //  - target : ID of target input field, required
  //  - url : Target URL to fetch suggestions, required
  //  - delay : Delay before autocomplete fires up, optional, default 500ms
  //  - min : Minimum characters to fire up autocomplete, default 2

    // Create autocomplete wrapper and box
    var id = Object.keys(suggest.instance).length,
        input = document.getElementById(opt.target);
    input.outerHTML = "<div id='acWrap" + id + "' class='acWrap'>" + input.outerHTML + "<div id='acBox" + id + "' class='acBox'></div></div>";

    // Set the HTML references and options
    suggest.instance[opt.target] = {
      input : document.getElementById(opt.target),
      wrap : document.getElementById("acWrap" + id),
      box : document.getElementById("acBox" + id),
      delay : opt.delay ? opt.delay : 500,
      url : opt.url,
      min : opt.min ? opt.min : 2,
      timer : null
    };

    // Attach key listener
    suggest.instance[opt.target].input.addEventListener("keyup", function (evt) {
      // Clear old timer
      if (suggest.instance[opt.target].timer != null) {
        window.clearTimeout(suggest.instance[opt.target].timer);
      }

      // Hide and clear old suggestion box
      suggest.instance[opt.target].box.innerHTML = "";
      suggest.instance[opt.target].box.style.display = "none";

      // Create new timer, only if minimum characters
      if (evt.target.value.length >= suggest.instance[opt.target].min) {
        suggest.instance[opt.target].timer = setTimeout(
          function () { suggest.fetch(evt.target.id); },
          suggest.instance[opt.target].delay
        );
      }
    });

    // This is used to hide the suggestion box if the user navigates away
    suggest.instance[opt.target].input.addEventListener("focus", function (evt) {
      if (suggest.focus != null) { suggest.close(null, true); }
      suggest.focus = opt.target;
    });
  },

  fetch : function (id) {
  // suggest.fetch() : AJAX get suggestions and draw
  // id : ID of target input field, automatically passed in by keyup event

    var req = new XMLHttpRequest();
    req.addEventListener("load", function () {
      var data = JSON.parse(this.response);
      if (data.length > 0) {
        data.forEach(function (el) {
          suggest.instance[id].box.insertAdjacentHTML("beforeend", "<div onclick=\"suggest.select('" + id + "', this);\">" + el + "</div>");
        });
        suggest.instance[id].box.style.display = "block";
        document.addEventListener("click", suggest.close);
      }
    });
    req.open("GET", suggest.instance[id].url + "?term=" + suggest.instance[id].input.value);
    req.send();
  },

  select : function (id, el) {
  // suggest.select() : user selects a value from autocomplete

    suggest.instance[id].input.value = el.innerHTML;
    suggest.instance[id].box.innerHTML = "";
    suggest.instance[id].box.style.display = "none";
    document.removeEventListener("click", suggest.close);
  },

  close : function (evt, force) {
  // suggest.close() : close the autocomplete box if the user clicks away from the input field
  // evt : click event
  // force : force close

    if (force || event.target.closest(".acWrap") == null) {
      suggest.instance[suggest.focus].box.innerHTML = "";
      suggest.instance[suggest.focus].box.style.display = "none";
      document.removeEventListener("click", suggest.close);
    }
  }
};

我认为它会简单地更新 GET 术语

我创建了两个不同的 js 文件并更新了术语行。

autocompletecountry.js

req.open("GET", suggest.instance[id].url + "?termco=" + suggest.instance[id].input.value);

autocompletestate.js

req.open("GET", suggest.instance[id].url + "?termst=" + suggest.instance[id].input.value);

我的 search.php 个文件

<?php
// CONNECT TO DATABASE
$host = '11.22.33.44';
$dbname = 'dbname';
$user = 'dbuser';
$password = 'PASSWORD';
$charset = 'utf8';
$pdo = new PDO(
  "mysql:host=$host;dbname=$dbname;charset=$charset", $user, $password, [
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    PDO::ATTR_EMULATE_PREPARES => false,
  ]
);

// SEARCH AND OUTPUT RESULTS
$stmt = $pdo->prepare("select distinct country FROM locationtbl WHERE country LIKE ?");
$stmt->execute(["%" . $_GET['term'] . "%"]);
$data = [];
while ($row = $stmt->fetch(PDO::FETCH_NAMED)) {
  $data[] = $row['country'];
}
$pdo = null;
echo json_encode($data);
?>

我创建了两个不同的搜索文件并更新了术语行。

searchcountry.php

$stmt->execute(["%" . $_GET['termco'] . "%"]);

searchstate.php

$stmt->execute(["%" . $_GET['termst'] . "%"]);

现在发生的事情是，当我开始在文本框 1 中输入时，会列出所有国家/地区。但是当我去

example.com/searchcountry.php?termco=un

它只会显示名称中带有 'un' 的国家/地区。

来源：https://code-boxx.com/autocomplete-javascript-php-mysql/

我的index.php

<!DOCTYPE html>
<html>
  <head>
    <link href="autocomplete.css" rel="stylesheet">
    <script src="autocompletecountry.js"></script>
    <script src="autocompletestate.js"></script>

    <script>
    /* [INIT - ON WINDOW LOAD] */
    window.addEventListener("load", function(){
      suggest.attach({
        target : "inputA",
        url : "http://example.com/searchcountry.php"
      });
      suggest.attach({
        target : "inputB",
        url : "http://example.com/searchstate.php",
        delay : 200,
        min : 3
      });
    });
    </script>
  </head>
  <body>
     <input type="text" id="inputA"/>
     <br>
    <input type="text" id="inputB"/>
  </body>
</html>

Answer 1

弄清楚我必须做什么。

该页面仅适用于 1 个 autocomplete.js 文件

我必须像下面那样编辑 autocomplete.js

if (document.getElementById("inputB").value == '' && document.getElementById("inputC").value == '') {
req.open("GET", suggest.instance[id].url + "?term=" + suggest.instance[id].input.value);
req.send();
} else if (document.getElementById("inputC").value == '') {
req.open("GET", suggest.instance[id].url + "?cou=" + document.getElementById("inputA").value + "&term=" + suggest.instance[id].input.value);
req.send();
} else if (document.getElementById("inputA").value != '' && document.getElementById("inputB").value == '') {
req.open("GET", suggest.instance[id].url + "?cou=" + document.getElementById("inputA").value + "&term=" + suggest.instance[id].input.value);
req.send();
} else {
req.open("GET", suggest.instance[id].url + "?cou=" + document.getElementById("inputA").value + "&sta=" + document.getElementById("inputB").value + "&term=" + suggest.instance[id].input.value);
req.send();
}
},

这将允许 3 个依赖于第一个文本框的自动完成框。

在自动完成中更改 'term'

Changing 'term' in autocomplete

javascript

php

autocomplete