Я пытаюсь добавить элементы опций в список данных. Я запрашиваю сервер MySQL с помощью узла. Я хочу сделать так, чтобы до тех пор, пока ввод, который вводит пользователь, присутствует в любой точке строки названия университета, этот университет будет отображаться как опция в списке данных. Запросы работают нормально и все такое, но дело в том, что, когда я добавляю параметры в список данных, они не всегда отображаются. Например, когда я набираю «Академия», я получаю раскрывающийся список названий университетов, включая слово «Академия» (не более десяти вариантов):
Поиск всех университетов с помощью «Академия» "в названии.
Но когда я пытаюсь ввести« Academy Butler », никакие варианты не отображаются, хотя существуют университеты с названиями, включающими оба слова (которые успешно запрашиваются из таблицы):
Поиск всех университетов со словами «Academy» и «Butler» в названии.
Когда я смотрю на вывод console.log (), действующие университеты Результаты поиска «Academy Butler» распечатаны, что означает, что запрос работал нормально. Кажется, я не могу понять, в чем проблема. Вот мой код:
register. js (Renderer Process):
let ipcRenderer = require("electron").ipcRenderer;
let uniName = document.getElementById("uniName");
let dropdown = document.getElementById("uniList");
/**
* This thing just lets the main process (main.js) know about the event.
*/
uniName.addEventListener("input", () => {
ipcRenderer.send("user_typing", uniName.value);
});
/**
* This adds the options to the datalist after getting the query result array in main.js.
*/
ipcRenderer.on("uni_list", function(event, uniList) {
dropdown.innerHTML = ""; // Resetting the dropdown datalist so there aren't duplicate query results in the list.
for (uni in uniList) {
let option = document.createElement("option");
option.value = uniList[uni].NAME;
dropdown.appendChild(option);
}
});
main. js (Main process):
const electron = require("electron");
const mysql = require("mysql");
const ipcMain = require("electron").ipcMain;
ipcMain.on("user_typing", function(event, nameValue) {
let string = nameValue;
let statement = 'SELECT NAME FROM all_universities WHERE MATCH (NAME) AGAINST (? IN NATURAL LANGUAGE MODE);';
connection.query(statement, string, function(error, result) {
if(error) throw error;
let small_list = [];
if(result[0] != null) {
for(let i=0; i<10; i++) { // Limiting possible options to 10 so as not to slow everything down with thousands of options.
small_list.push(result[i]);
console.log(small_list[i].NAME); // Outputting the names to see if they are being added to the array.
}
}
event.reply("uni_list", small_list); // Sending the list of universities containing user input back to render process so the datalist can add them as options.
});
});
HTML:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="main_styles.css">
</head>
<body>
<h1>University Registration</h1>
<form>
<label for="uniName"> University/Institution: </label><br>
<input list = "uniList" name="uniName" id="uniName">
<datalist id="uniList">
</datalist> <br>
<label for="password"> Create Password: </label><br>
<input type="password" id="password"> <br>
<label for="passwordConf"> Confirm Password: </label><br>
<input type="password" id="passwordConf"><br><br>
</form>
<button id="submitButton"> Register </button>
<script>
require("./register.js");
</script>
</body>
</html>