Wieder erst Abends wurde es ernster mit dem JavaScript Zeug. Ich baute die Suchanfrage einfach per GET um und bekam schließlich auch die Sachen vom Server
Tinker installierte ich fix, damit man gleich ein REPL (Read–eval–print loop) Interface für Laravel hat.
composer require laravel/tinker und Laravel\Tinker\TinkerServiceProvider::class zum Providers Array in config/app.php
Das ging dann aber ich bekam trotz Rücklauf von JSON nicht die mapping auf das Awesomplete Interface hin. Das war frustrierend mit den ganzen Klammern.
Dank eines Mozilla Beispiels schaffte ich es dann doch, wenigstens die JSON Respons der Suggestions auf ’ne Seite zu kleben. Ein kleiner Erfolg, über den echte Coder nur lachen können aber ein großer für mich. JavaScript macht keinen Spaß aber da muss ich durch für ein akzeptables Interface.
Ich merkte dann im Morgengrauen, dass es mit den Trigrams nicht so toll läuft. Man sollte schon den ersten Buchstaben als wichtigstes Merkmal nehmen, danach nach Popularität (bisher Population) sortieren. Bis dahin ist’s noch eine Weile. Hauptsache das Ding geht dann erst mal. Muss mich mit der .map Sache beschäftigen und ganz spät dann klappte auch alles.
Sehr zufrieden, sogar mit Autoselect First war eine Sache drin, die man braucht. Jetzt muss ich noch die Links drin haben und am Ende per CSS alles schön stylen. Das wird schon – ist erst mal brauchbar und jetzt kann ich endlich an die Daten wieder. Morgen erst mal andere Arbeiten.
var myList = document.querySelector('ul');
document.addEventListener('DOMContentLoaded', () => {
const input = document.getElementById('search');
const awesomplete = new Awesomplete(input, {
autoFirst: true,
});
const min_letters = 2; // how many letters before we start doing AJAX requests
const endpoint = 'http://127.0.0.1:8000/search?city=';
input.addEventListener("awesomplete-selectcomplete", (ev) => console.log(ev.text));
input.addEventListener('keyup', (e) => {
var code = (e.keyCode || e.which);
if (code === 37 || code === 38 || code === 39 || code === 40 || code === 27 || code ===
13) {
return;
} else if (input.value.length >= min_letters) {
const murl = endpoint + input.value;
fetch(murl, {
method: 'get'
})
.then(function (response) {
if (!response.ok) {
throw new Error("HTTP error, status = " + response.status);
}
return response.json();
})
.then(function (json) {
awesomplete.list = json.data.map(data => ({
label: data.city + ' (' + data.country + ')',
value: data.country
}));
})
.catch(function (error) {
var p = document.createElement('p');
p.appendChild(
document.createTextNode('Error: ' + error.message)
);
document.body.insertBefore(p, myList);
});
}
});
});
0 Responses to “Tinker”