根据用户在文本字段中输入的内容显示链接

Question

我希望你们都很好。首先，我是一个非常非常初级的网络开发，所以我在这里寻求你的帮助。我不确定SO是否适合这种需求，如果不是，我想道歉，并随时删除我的帖子
我想创建一个文本字段，根据您在文本字段中所写的内容显示文本(带有href的链接(。

让我准确地说。我有一份邮政编码的数据清单。根据您的邮政编码，您有合适的交货日期。(这是一个电子商务网站，每个交货日有一个页面(例如，如果您居住的邮政编码为69001(法国邮政编码系统(，您将在文本字段中输入该邮政编码，然后按enter键或单击按钮，它将显示与您输入的邮政编码有关的正确链接。

我尝试过一些肮脏的事情。我可以用数据列表制作文本字段，但我不知道如何显示用户在文本字段中所写内容的正确链接。

我希望我已经解决了我的问题，并祝大家度过愉快的一天。

Answer 1

如果我正确理解了这个问题，那么当我试图弄清楚PostgreSQL时，我实际上自己也做过一个非常类似的项目。这就是我所做的：

首先我创建了一个输入(注意oninput="zipChanged(("(；在以下代码行中(：

<input list="zips" name="zips" id="zipCode" oninput="zipChanged()" placeholder="ZIP code">

然后我给了它一个列表，其中它将使用<数据列表>标记为放置所有选项的块，并且<选项>标签，将每个可能的选项放入。

<datalist id="zips">
<option id="zipOption1">
<option id="zipOption2">
<option id="zipOption3">
<option id="zipOption4">
<option id="zipOption5">
</datalist>

在这之后，由于我有oninput="；zipChanged"；在输入内部编写时，每当用户在写入邮政编码时写入或删除任何数字时，函数zipChanged((都会被激活。功能是这样的：

var currentSearch = document.getElementById("zipCode").value;
var url = "http://127.0.0.1:8096/?need=" + currentSearch;
xhttp.open("GET", url, true);
xhttp.onreadystatechange = function () {
if (this.readyState == 4) {
if (this.status == 200) {
zipPossibilities_G = JSON.parse(this.responseText);
fillZipPossibilities();
} else { }
}
};
xhttp.send();

让我为您分解一下功能：

下面一行用于将用户在文本输入中的写入值放入名为currentSearch的变量中。

var currentSearch = document.getElementById("zipCode").value;

其余的代码是为了让我的HTML文件连接到我的nodeJS服务器，我曾用它连接到PostgreSQL数据库，我从中提取了数据库中最类似于用户输入的邮政编码部分的邮政编码，以此向用户显示他们可能试图键入的邮政编码。服务器可以通过查找与用户输入的邮政编码部分以相同数字开头的邮政编码来实现这一点。它向数据库发送了一个SQL代码，告诉它提供信息，这就是代码：

select "[name of the column in which the Zip Codes are]" from "[name of your table in the databse]" where "[name of the column in which the Zip Codes are]" like '[the number entered by the user]%' limit 5;

如果需要的话，这是服务器的完整代码(我去掉了一些变量，添加了一些注释等等，以澄清什么是什么(：

const http = require('http');
const url = require('url');
const { Client } = require('../../../nodeModules/pg/node_modules/pg');
http.createServer(function (req, res) { //creating the http server from which the information can be extracted
const client = new Client({
user: "[the PostgreSQL user you're using to manage the database]",
password: "[password to your database]",
host: "localhost",
port: 5432,
database: "[the name of your database]"
});
res.writeHead(200, { 'Content-Type': 'text/html' });
res.writeHead(200, { "Access-Control-Allow-Origin": "*" });
try {
execIt();
async function execIt() { //creating an async function, it is important as otherwise await won't work
try {
var infoFromURL = url.parse(req.url, true).query; // 
console.log("the Num: " + infoFromURL.need);
var neededNum1 = infoFromURL.need;
var neededNum = neededNum1.toString();
if ((neededNum.length > 5) || (neededNum.length == 5)) {
res.write("");
return res.end();
} else {
await client.connect(); //waits for the client to connect
console.log("Connected successfully.");
// the following line has the SQL code that'll be sent to the database
const { rows } = await client.query("select "[name of the column in which the Zip Codes are]" from "[name of your table in the databse]" where "[name of the column in which the Zip Codes are]" like '[the number entered by the user]%' limit 5;");
console.log(rows);
// from here to up till "return res.end();" line the entire code is just to print out the data recovered from the database
var toPrint = "[";
for (var i = 0; i < 5; i++) {
if (i == 4) {
toPrint = toPrint + """ + rows[i].zip.toString() + """ + "]";
} else {
toPrint = toPrint + """ + rows[i].zip.toString() + """ + ", ";
}
}
console.log(toPrint);
res.write(toPrint);
await client.end();
console.log("Client disconnected successfully.");
return res.end();
}
} catch (ex) {
console.log(`Something wrong happend ${ex}`);
}
}
} catch (error) {
console.log(error);
}
}).listen(8096);
console.log('Server running at http://127.0.0.1:8096/');

由于您可能没有使用PostgreSQL，甚至可能没有使用nodeJS，您可以忽略上面的代码，但如果您使用了，它可能会有所帮助。

这基本上发送了与用户输入的邮政编码部分开头最相似的前5个邮政编码。

zipChanged((函数的以下部分是收集发送回来的信息并对其进行排序

zipPossibilities_G = JSON.parse(this.responseText);
fillZipPossibilities();

这里的数组zipPossibilities _G(它是一个全局数组(收集nodeJS服务器发送回html文件的文本，函数fillZipPossibilies((是填充中的选项。

fillZipPossibilities((是这样的：

function fillZipPossibilities() {
for (var i = 0; i < 5; i++) {
document.getElementById(zipOptionArr_G[i]).value = 
zipPossibilities_G[i];
}
}

这里5<选项>标签中充满了已发送回的文件。zipOptionArr_G数组是另一个全局数组，其id为5<选项>标记并看起来像这个

var zipOptionArr_G = ["zipOption1", "zipOption2", "zipOption3", "zipOption4", "zipOption5"];

我希望我能正确理解这个问题，这能帮助你解决