using google programmable search engine Options

[miorma]

Hi all, sorry but my I'm quite new in this and Im stucked with someting that thought it was going to be simpler.
Im trying to use several google searches in my site depending on the selection made by user. Also depending on the selection a translation will be made and simultaneous searches will appear. However the results are not constant, sometimes appear correctly, sometimes no, I thought it was something to do with the clearance of previous results, but still gives wrong results. I mean it uses incorrect google ids, when pressing "search button" and not even changing the previous selections the results are different each time (mixing google search ids..) I would really appreciate your help and help me find the error(s) in the code: I include a copy here:
Many thanks:

<div class="search-container">
<label for="fabricante">Fabricante</label>
<select id="fabricante" name="fabricante" onchange="populateTipos()">
<option value="">Select Fabricante</option>
<option value="B">B</option>
<option value="A ">A </option>
</select>
</div>

<div class="search-container">
<label for="tipo">Tipo</label>
<select id="tipo" name="tipo">
<option value="">Select Tipo</option>
</select>
</div>

<div class="search-container">
<label for="extraText">Additional Text</label>
<input type="text" id="extraText" placeholder="Enter additional text" onkeypress="checkEnter(event)" />
</div>

<div class="search-container">
<button onclick="performSearch()">Search</button>
</div>

<div class="search-results-container">
<div class="search-results-column">
<div class="gcse-searchresults" id="searchresults1"></div>
</div>
<div class="search-results-column">
<div class="gcse-searchresults" id="searchresults2"></div>
</div>
</div>

<script>
var tipos = {
B: ["1", "2", "3"],
'A': ["4", "5", "6"]
};

var cseIds = {
'A': 'd1c505ecb5da14bXX',
B: {
spanish: 'a518d8db7c8334eYY',
german: '342daa766f4b74aZZ'
}
};

function populateTipos() {
var fabricanteSelect = document.getElementById('fabricante');
var tipoSelect = document.getElementById('tipo');
var selectedFabricante = fabricanteSelect.value;

tipoSelect.innerHTML = '<option value="">Select Tipo</option>';

if (selectedFabricante) {
tipos[selectedFabricante].forEach(function(tipo) {
var option = document.createElement('option');
option.value = tipo;
option.textContent = tipo;
tipoSelect.appendChild(option);
});
}
}

function loadGoogleCSE(cx, divId, query, gname) {
var gcseScript = document.createElement('script');
gcseScript.type = 'text/javascript';
gcseScript.async = true;
gcseScript.src = 'https://cse.google.com/cse.js?cx=' + cx;

gcseScript.onload = function() {
google.search.cse.element.render({
div: divId,
tag: 'searchresults-only',
gname: gname // Unique identifier for the search engine
});

google.search.cse.element.getElement(gname).execute(query);
};

var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcseScript, s);
}

function performSearch() {
var fabricante = document.getElementById('fabricante').value;
var tipo = document.getElementById('tipo').value;
var extraText = document.getElementById('extraText').value;

if (fabricante) {
var searchResultsElement1 = document.getElementById('searchresults1');
var searchResultsElement2 = document.getElementById('searchresults2');

searchResultsElement1.innerHTML = ''; // Clear previous results
searchResultsElement2.innerHTML = ''; // Clear previous results

var query1 = fabricante + " " + tipo + " " + extraText;

if (fabricante === 'B') {
loadGoogleCSE(cseIds.B.spanish, 'searchresults1', query1, 'B_spanish');

var query2 = fabricante + " " + tipo + " " + translateToGerman(extraText);
loadGoogleCSE(cseIds.B.german, 'searchresults2', query2, 'B_german');
} else {
loadGoogleCSE(cseIds[fabricante], 'searchresults1', query1, 'A');
searchResultsElement2.innerHTML = ''; // Clear second column for A
}
}
}

function translateToGerman(text) {
// De momento, devolvemos el texto original
return text;
}

function checkEnter(event) {
if (event.key === 'Enter') {
performSearch(); // Perform search on Enter key press
}
}
</script>

</body>
</html>

[teresa32yon]

Let’s dive into the possible issues and see if we can pinpoint the problem.

Multiple Google CSE Scripts: Ensure that the Google CSE script isn’t being loaded multiple times, as it may cause conflicts. Consider creating the script element only once if it hasn’t been created yet.

Clear Previous Results: You are clearing previous results by setting innerHTML to an empty string, which is correct. However, make sure this doesn't interfere with the initialization of the search elements.

Asynchronous Issues: Because loadGoogleCSE is asynchronous, ensure you’re not running into race conditions where multiple scripts are loaded and executed out of order. You might want to add some checks or callbacks to ensure each script is loaded before the next one executes.

Unique Identifiers: Ensure that the gname parameter you are using is unique for each search instance to avoid conflicts.

Here’s a slightly adjusted version of your performSearch and loadGoogleCSE functions to address these points: TellCulvers
function loadGoogleCSE(cx, divId, query, gname) {
var gcseScriptId = 'gcse-script-' + gname;
var existingScript = document.getElementById(gcseScriptId);
if (!existingScript) {
var gcseScript = document.createElement('script');
gcseScript.id = gcseScriptId;
gcseScript.type = 'text/javascript';
gcseScript.async = true;
gcseScript.src = 'https://cse.google.com/cse.js?cx=' + cx;

gcseScript.onload = function() {
google.search.cse.element.render({
div: divId,
tag: 'searchresults-only',
gname: gname
});

google.search.cse.element.getElement(gname).execute(query);
};

var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcseScript, s);
} else {
google.search.cse.element.getElement(gname).execute(query);
}
}

function performSearch() {
var fabricante = document.getElementById('fabricante').value;
var tipo = document.getElementById('tipo').value;
var extraText = document.getElementById('extraText').value;

if (fabricante) {
var searchResultsElement1 = document.getElementById('searchresults1');
var searchResultsElement2 = document.getElementById('searchresults2');

searchResultsElement1.innerHTML = ''; // Clear previous results
searchResultsElement2.innerHTML = ''; // Clear previous results

var query1 = fabricante + " " + tipo + " " + extraText;

if (fabricante === 'B') {
loadGoogleCSE(cseIds.B.spanish, 'searchresults1', query1, 'B_spanish');

var query2 = fabricante + " " + tipo + " " + translateToGerman(extraText);
loadGoogleCSE(cseIds.B.german, 'searchresults2', query2, 'B_german');
} else {
loadGoogleCSE(cseIds[fabricante], 'searchresults1', query1, 'A');
searchResultsElement2.innerHTML = ''; // Clear second column for A
}
}
}

Here’s what has been adjusted:

Adding a check for existing scripts to avoid reloading them.

Ensuring unique IDs (gcse-script-{gname}) for scripts to avoid conflicts.

Maintaining asynchronous behavior while avoiding race conditions.

Feel free to test these changes and see if they help in stabilizing the search results!