0

I am trying to build an autocomplete fuzzy search using the jquery plugin "Fuzzysearch". My problem is that it works only for latin characters. For example if i use a Sweden character like "ä" or "å" it doesn't display results that contains the latin caharacter "a" and vice versa. I guess that the solution is to create a variable and assign the non-latin characters with the latin characters like in my code below.

But i really dont know how can i use this variable so if someone types a non latin character inside the input field to display all the words that contain the assigned letter.

For example if i type the letter "å" the result list must contain the words "Orånge E8", "Xiaomi MiA1", "Samsung S9", "Motorola M5" etc, and when i type the latin letter "a" to get also the words that containing non latin characters like "å" or/and "ä" etc

I don't think my question is duplicated of this question as i want to use jquery and not javascript

Here is my code:

var productsList = [
   {"productName":"iPhone 8"},
   {"productName":"iPhone X"},
   {"productName":"Xiaomi MiA1"},
   {"productName":"Motorola M5"},
   {"productName":"Samsung S9"},
   {"productName":"One Plus 5"},
   {"productName":"Alcatel X1"},
   {"productName":"Orånge E8"}
    ];


$(document).ready(function(){
 $("#category").fuzzyComplete(productsList);
  });
  
var letterMap = {
  "å":"a",
  "ä":"a"
}

$('#category').keyup(function(){
//How can i use the variable "letterMap" ???

});
.search-block {position:relative;width:300px}
.category-field{width:100%;padding:8px;}

.fuzzyResults {
  background: #fff;
  z-index: 1;
  padding:0px !important;
  top: 100% !important;
  left:0;
  position: absolute;
  border: 1px solid #ddd;
  width: 100% !important;
  margin-top:5px;
  display:none;
}

.__autoitem {
  padding:10px;
  font-size: 1.1em;
  cursor: pointer;
  font-weight:600;
}

.__autoitem:hover {
background:#eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/JSON-Autocomplete-Fuzzy-Search-jQuery-fuzzyComplete/fuse.min.js"></script>
<script src="https://www.jqueryscript.net/demo/JSON-Autocomplete-Fuzzy-Search-jQuery-fuzzyComplete/dist/js/fuzzycomplete.min.js"></script>

<div class="search-block">
<p>FIND A PRODUCT</p>
<input placeholder="eg iphone,samsung etc..." required="required" class="category-field" name="category" id="category" autocomplete="off" type="text">
</div>
Designer
  • 875
  • 7
  • 26
  • 2
    Possible duplicate of [Remove accents/diacritics in a string in JavaScript](https://stackoverflow.com/questions/990904/remove-accents-diacritics-in-a-string-in-javascript) – Cid Sep 28 '18 at 08:11

1 Answers1

0

I use this little thingy to convert charset when I include files. Below should work by just copy/paste it into your code at the bottom.

$.ajaxSetup({
  'beforeSend': function(xhr) {
    xhr.overrideMimeType('text/html; charset=ISO-8859-1');
  }
});
Simon Jensen
  • 287
  • 5
  • 24
  • As I understand the question, it's using a javascript 3rd-party library to make the fuzzy search, so there would not be an `ajax` call. (but otherwise a worth tit-bit) (but maybe the 3rd-party library *is* making an ajax call to a service?) – freedomn-m Sep 28 '18 at 08:20
  • I read the question wrong! I'm not thinking that the 3rd-party library would make any ajax call. It should simply convert any characters to what would suit the database, e.g. `ä -> a` before sending it to the database. This have pros and cons (another discussion). Converting text as I did in this answer could also lead to failure. Using `UTF-8` and converting to `ISO-8859-1` will means that some characters as `æ, ø, and å` would not work correctly and show up as some failure ASCII... – Simon Jensen Sep 28 '18 at 09:04