Why the onclick event does not work on my li?
Question
I am creating a js plugin to manage tags and I’m looking to make a list of autocompletion from the site tags wordpress "get_tags()".
I can display the suggestions but I can’t select the right one.
The problem is that my "li" listener does not work.
Can someone please help me ?
Here is my full JS code :
let aTags, aTagsRaw, inputValue;
const loadTags = ( $array ) => {
$array.sort((a, b) => parseFloat( b.count ) - parseFloat( a.count ));
aTags = $array;
}
const rawTags = ( $array ) => {
aTagsRaw = $array;
}
window.onload = () => {
const createTags = ( obj, counter ) => {
// Define variables
let $container = document.getElementById( 'enode-area' );
let $item = document.createElement( 'li' );
let $link = document.createElement( 'a' );
let $content = document.createTextNode( obj.name );
// Add class/attributes
$item.classList.add( 'enode__item' );
$link.classList.add( 'enode__item--link' );
$item.setAttribute( 'key', counter);
$link.setAttribute( 'href' , ( "https://aqui.e-node.net/etiquettes/" + obj.slug + '/' ) );
$link.setAttribute( 'data-id', obj.term_id );
// DOM injection
$link.appendChild( $content );
$item.appendChild( $link );
$container.appendChild( $item );
};
// Loop to display current tags
let counter = 0;
aTags.forEach( $el => {
createTags( $el, counter );
counter++;
});
const cleanTags = () => {
let $tags = document.querySelectorAll('.enode__choice');
$tags.forEach( $el => {
$el.remove();
});
}
const listTags = ( obj, counter, e ) => {
// Define variables
let $container = document.getElementById( 'list-tags' );
let $item = document.createElement( 'li' );
let $content = document.createTextNode( (obj.count) ? "[" + obj.count + "] - " + obj.name : obj.name );
// Add class/attribute
$item.classList.add( 'enode__choice' );
if( !obj.error ) {
$item.setAttribute( 'key', counter );
}
( !obj.error ) ? $item.value = obj.term_id : $item.setAttribute('error', true);
// Dom injection
$item.appendChild( $content );
$container.appendChild( $item );
}
let $searchBar = document.getElementById('input-tags');
let $tags, $tagsArr, stateBar, slug;
let results = [];
const updateBar = ( e ) => {
// Refresh completion
cleanTags();
stateBar = e.target.value;
results = [];
// Search with slug
for( let i = 0; i < aTagsRaw.length; i++ ) {
obj = aTagsRaw[i];
slug = aTagsRaw[i].slug;
if( stateBar === slug.substring( 0, stateBar.length )) {
results.push( obj );
}
}
// Throw error
if( results.length == 0 ) {
results.push( {
name : 'Désolé, aucune étiquette ne correspond à votre recherche...',
slug : "none",
error: true
} );
}
// Break loop
for( let j = 0; j < results.length; j++ ) {
listTags( results[j], j );
if( j === 4 ) {
break;
}
}
Array.prototype.slice.call(document.querySelectorAll('.enode__choice')).map(function(item) {
item.addEventListener('click', function(e) {
e.preventDefault();
console.log("value", e.target.value);
}, true);
});
}
const displayList = () => {
let $panel = document.getElementById('list-tags');
$panel.classList.toggle('js-is-display');
}
$searchBar.addEventListener( "focusin", displayList );
$searchBar.addEventListener( "focusout", displayList );
$searchBar.addEventListener( "input", updateBar );
}
Thanks (:
0
2 months
0 Answers
7 views
0
Leave an answer
You must login or register to add a new answer .