Response title
This is preview!
jQuery autocomplete Safari issue
in Using jQuery UI
•
5 years ago
Hello,
I'm really new at jQuery and have managed to integrate the jQuery autocomplete to a wordpress site.
Almost everything work as I want with one small problem.
I'm using a plugin for woocommerce called Extra product options. This plugin give me the ability to use conditional logic to custom build a product. I needed to extend this plugin to show images of a lot of different color options and also show a new color number if the old one was entered.
I managed to get everything to work except that in Safari when selecting a color from autocomplete somehow the next option dosen't react to autocompletes value in the text field. So for example if I write "024" an option appears "0245". If I click on "0245" the hidden field dosen't show, but the image related shows. So then I have to go back and manually print the number in the textfield.
This only happens in Safari, not Chrome or Firefox.
Does anybody know why this happens?
This is my code:
- jQuery(document).ready(function($) {var availableLamell = ["0116","0016P","0196","0197","0245","0245P","0246","0256","0270","0454","0709","0912","0948","1257","1610","1651","1854","1858","1858P","1861","2058","2228","2448","3251","3853","4250","4427","4470","4470P","4602","4839","4857","5055","5105","5752","7003","7072","7113","7120","7154","7154P","8431","8507","8553","8555","8556","8559","9095","9097","9151","9184","9299"];$( ".lamellColor" ).autocomplete({autoFocus: true,source: availableLamell,select: function(event, ui) {$(".imageJSdiv-div").html("<img src='http://birdinatree.se/wp-content/uploads/2017/11/" + ui.item.value + ".jpg'>");},change: function(event, ui) {if (ui.item === null) {var changedColor = this.value;$(this).val('');var dataColor = {"Titles": [{"0001": "0116"},{"0001P": "0016P"},{"0179": "0196"},{"9800": "0197"},{"0065": "0245"},{"0065P": "0245P"},{"0131": "0246"},{"0180": "0256"},{"0147": "0270"},{"0896": "0454"},{"0012": "0709"},{"0010": "0912"},{"0103": "0948"},{"0104": "1257"},{"0244": "1610"},{"0167": "1651"},{"0739": "1854"},{"0049": "1858"},{"0049P": "1858P"},{"8003": "1861"},{"4031": "2058"},{"0258": "2228"},{"245": "3251"},{"6037": "3853"},{"1149": "4250"},{"0061": "4427"},{"0285": "4470"},{"0285P": "4470P"},{"0002": "4602"},{"0060": "4839"},{"0259": "4857"},{"0255": "5055"},{"0570": "5105"},{"0017": "7003"},{"1901": "7072"},{"0713": "7113"},{"0714": "7120"},{"0058": "7154"},{"0058P": "7154P"},{"0950": "8431"},{"0087": "8507"},{"9941": "8553"},{"9945": "8555"},{"9944": "8556"},{"9949": "8559"},{"0051": "9151"},{"0751": "9184"}]};function getValueByKey(key, dataColor) {var i, len = dataColor.length;for (i = 0; i < len; i++) {if (dataColor[i] && dataColor[i].hasOwnProperty(key)) {return dataColor[i][key];}}}var colorCheck = changedColor;if (getValueByKey(colorCheck, dataColor.Titles) == null) {$(".imageJSdiv-div").html('<p class="dukFel">Färgen finns inte, eller så tryckte du inte på färgen i listan.</p>');} else {$(".imageJSdiv-div").html('<p class="dukFel">' + changedColor + ' heter numera ' + getValueByKey(colorCheck, dataColor.Titles) + '. Välj detta nummer i listan.');}}}});} );
1