[Resolved] How to use custom taxonomy as parameters in my search text field?

[Author]

Posts

[benC-15]

Tell us what you are trying to do?
The taxonomy terms are displayed as checklist instead of just using a text field to match the search input. I preferred this because my text field has an autocomplete feature and should match the values from taxonomy terms while the user is typing a character.

Is there any documentation that you are following?
None

Is there a similar example that we can see?

What is the link to your site?
hidden link

[Shane]

Hi Ben,

Thank you for contacting our support forum.

Is it that you are converting the default field for the taxonomy to this new search where it has the autocomplete?

If so could you let me know the code you are using to do this.

Thanks,
Shane

[benC-15]

I just like to explain first what i was trying to achieve and what was suggested from previous ticket i submitted. I have strings (Neighborhoods) coded in JS editor of Toolset Views for autocomplete function but WPML support said it is not possible to convert those strings at the moment. They suggested i create a duplicate View and manually replace the translated strings in there and use that View for the translated page. My problem then was that the search function using the autocomplete values won't give the correct results anymore and so they suggested again to convert the custom fields i used for the Neighborhoods to Taxonomy. I created the Taxonomy and the terms and translated them as well. I then tested some custom posts to use the taxonomy terms. Now i wanted the taxonomy terms to be used in the text field parameter so that the autocomplete feature will match those values and display the correct result. I tried a few codes before but it displays the taxonomy as checklist inside the text field. The JS code for the autocomplete is below and the html code of the Views is the attached image (all-neighborhoods is the slug for the taxonomy i created and neighborhoods-all is the old custom field that i am trying to replace).

I still get no items found so far. Please help.

//* Autocomplete - Toolset views
function autocomplete(inp, arr) {
/*the autocomplete function takes two arguments,
the text field element and an array of possible autocompleted values:*/
var currentFocus;
/*execute a function when someone writes in the text field:*/
inp.addEventListener("input", function(e) {
console.log('test');
var a, b, i, val = this.value;
/*close any already open lists of autocompleted values*/
closeAllLists();
currentFocus = -1;
/*create a DIV element that will contain the items (values):*/
a = document.createElement("div");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
/*append the DIV element as a child of the autocomplete container:*/
this.parentNode.appendChild(a);
/*for each item in the array...*/
for (i = 0; i < arr.length; i++) {
/*check if the item starts with the same letters as the text field value:*/
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
/*create a DIV element for each matching element:*/
b = document.createElement("div");
/*make the matching letters bold:*/
b.innerHTML = "" + arr[i].substr(0, val.length) + "";
b.innerHTML += arr[i].substr(val.length);
/*insert a input field that will hold the current array item's value:*/
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
/*execute a function when someone clicks on the item value (DIV element):*/
b.addEventListener("click", function(e) {
/*insert the value for the autocomplete text field:*/
inp.value = this.getElementsByTagName("input")[0].value;
/*close the list of autocompleted values,
(or any other open lists of autocompleted values:*/
closeAllLists();
});
a.appendChild(b);
}
}
var c = document.createElement("div");
c.setAttribute('id', '');
c.innerHTML = '<button type="button" class="btn-advanced reset-filters" data-toggle="modal" data-target="#advancedModal">進階搜尋</button>';
a.appendChild(c);
});
inp.addEventListener("focus", function(e) {
console.log('test + focus');
var a, b, i, val = this.value;
/*close any already open lists of autocompleted values*/
closeAllLists();
currentFocus = -1;
/*create a DIV element that will contain the items (values):*/
a = document.createElement("div");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
/*append the DIV element as a child of the autocomplete container:*/
this.parentNode.appendChild(a);
/*for each item in the array...*/
for (i = 0; i < 0; i++) {
/*check if the item starts with the same letters as the text field value:*/
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
/*create a DIV element for each matching element:*/
b = document.createElement("div");
/*make the matching letters bold:*/
b.innerHTML = "" + arr[i].substr(0, val.length) + "";
b.innerHTML += arr[i].substr(val.length);
/*insert a input field that will hold the current array item's value:*/
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
/*execute a function when someone clicks on the item value (DIV element):*/
b.addEventListener("click", function(e) {
/*insert the value for the autocomplete text field:*/
inp.value = this.getElementsByTagName("input")[0].value;
/*close the list of autocompleted values,
(or any other open lists of autocompleted values:*/
closeAllLists();
});
a.appendChild(b);
}
}
var c = document.createElement("div");
c.setAttribute('id', '');
c.innerHTML = '<button type="button" class="btn-advanced reset-filters" data-toggle="modal" data-target="#advancedModal">進階搜尋</button>';
a.appendChild(c);
});
/*execute a function presses a key on the keyboard:*/
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
/*If the arrow DOWN key is pressed,
increase the currentFocus variable:*/
currentFocus++;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 38) { //up
/*If the arrow UP key is pressed,
decrease the currentFocus variable:*/
currentFocus--;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 13) {
/*If the ENTER key is pressed, prevent the form from being submitted,*/
e.preventDefault();
if (currentFocus > -1) {
/*and simulate a click on the "active" item:*/
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
/*a function to classify an item as "active":*/
if (!x) return false;
/*start by removing the "active" class on all items:*/
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
/*add class "autocomplete-active":*/
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
/*a function to remove the "active" class from all autocomplete items:*/
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
/*close all autocomplete lists in the document,
except the one passed as an argument:*/
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
/*execute a function when someone clicks in the document:*/
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}

/*An array containing all the neighborhood names in HK:*/
var neighborhoodsHK = ["金鐘","中環","堅尼地城","半山","西營盤","石塘咀","上環","蘇豪","太平山頂","寶馬山","柴灣","炮台山","杏花邨","康怡花園","北角","鰂魚涌","西灣河","筲箕灣","小西灣","太古城","天后","香港仔","鴨脷洲","數碼港","深水灣","香港海洋公園","薄扶林","淺水灣","石澳","赤柱","大潭","黃竹坑","銅鑼灣","跑馬地","大坑","灣仔","何文田","紅磡","九龍城","九龍塘","土瓜灣","黃埔花園","茶果嶺","九龍灣","觀塘","藍田","牛頭角","油塘","長沙灣","荔枝角","美孚","深水埗","石硤尾","彩虹邨","鑽石山","樂富邨","新蒲崗","慈雲山","黃大仙","紅磡","佐敦","旺角","奧海城","太子","大角嘴","尖沙咀","油麻地","葵涌","葵芳邨","青衣","粉嶺","羅湖","沙頭角","上水","清水灣","坑口","日出康城","西貢","調景嶺","將軍澳","火炭","馬鞍山","沙田","大圍","大埔","馬灣","深井","荃灣","黃金海岸","屯門","錦田","八鄉","石崗","新田","落馬洲","米埔","天水圍","元朗","流浮山","赤鱲角","長洲","愉景灣","南丫島","大嶼山","梅窩","昂坪","坪洲","貝澳","大澳","東涌"];

/*initiate the autocomplete function on the "myInput" element, and pass along the neighborhoodsHK array as possible autocomplete values:*/
autocomplete(document.getElementById("wpv_control_textfield_wpv-wpcf-neighborhoods-all"), neighborhoodsHK);

jQuery(document).ready(function(){

jQuery('input[name="name"]').focus();
jQuery("input:text:visible:first").focus();

jQuery(document).on('mouseenter', '#wpv_control_textfield_wpv-wpcf-neighborhoodsall', function(){
autocomplete(document.getElementById("wpv_control_textfield_wpv-wpcf-neighborhoods-all"), neighborhoodsHK);
});

jQuery('#wpv_control_textfield_wpv-wpcf-neighborhoods-all').on('click', function(){
jQuery('.home-banner .banner-information .modal-button-container').addClass('reveal');
});

jQuery(document).on('click', function(e){
var target = jQuery(e.target);
if(target.is('#wpv_control_textfield_wpv-wpcf-neighborhoods-all') || target.is('.btn-advanced') || target.is('#advancedModal') || target.closest('#advancedModal').length > 0){

} else {
jQuery('.home-banner .banner-information .modal-button-container').removeClass('reveal');
}
});
var inputChecked = jQuery('.accordion-container .checkbox .js-wpv-filter-trigger[type=checkbox]');
inputChecked.on('click', function(){
if(inputChecked.is(':checked')){
var label = jQuery('.accordion-container .checkbox label');
var labelStrong = jQuery('.accordion-container .form-group > label');
label.css('color', '#000');
labelStrong.css('color', '#000');
}
});

jQuery('.panel-title a').click( function(e) {
jQuery('.collapse').collapse('hide');
});

/* select all neighbourhoods on button click */
/* programatically add a checbox after each Area Title */
$('.accordion-container .form-group > label').after('<button type="button" class="check-all reset-filters">全選</button>');
$('.accordion-container .form-group .check-all').click(function(){
$(this).toggleClass('yes');
var checkboxes = $(this).next().find('input[type="checkbox"]');
if($(this).hasClass('yes')){
checkboxes.prop('checked', true);
$(this).text('取消全選', 'textdomain');
} else{
checkboxes.prop('checked', false);
$(this).text('全選','textdomain');
}
})

var indexofCheck = 0;
$('.checkboxes-order input[type=checkbox]').each(function(){
if($(this).is(':checked')){indexofCheck++};
})
console.log(indexofCheck);

$('#use-advanced-search').click(function(){
$('#wpv_control_textfield_wpv-wpcf-all-neighborhoods').attr("placeholder", "已選多項");
})

$('#cancel-advanced-search').click(function(){
$('#exTab1 .tab-content input[type=checkbox]').each(function(){
$(this).prop( "checked", false );
})
})

});
//* End toolset Autocomplete - Views

[Shane]

Hi Ben,

I believe this is because it is searching for the English string in the database.

Are your taxonomy values translated to match what you've entered in the code?

Also are you performing the search from the chinese version of the page?

Please let me know.

Thanks,
Shane

[benC-15]

Yes i already translated the taxonomy terms and tested the search using the Chinese version of the page hidden link . The screenshot i provided above (ss3.png) shows the English and Chinese versions of the Taxonomy (neighborhoods).
I also updated some custom posts (facilities) to use the new neighborhoods (Terms).

[Shane]

Hi Ben,

Would you mind allowing me admin access to the site so that I can check on this in more detail for you ?

Thanks,
Shane

[Shane]

Hi Ben,

See Screenshot.

From what I can see the search is working with the autocomplete.

Maybe i'm missing something

Thanks,
Shane

[Shane]

Is it that the view isn't filtering at all ?

[benC-15]

Yes autocomplete is now working but the results are not correct. If you look at the English page it correctly displays all neighborhoods based on the selected item from the autocomplete. The Chinese page seems to display almost the same results. There must be something wrong with the views filter. Can you help check please? Thanks.

[Shane]

Hi Ben,

Could you try now. The issue was with the query filter itself, your items should now start to filter.

Thanks,
Shane