Custom FuzzySearch

Developer
Kev Rousseau
Size
3,018 Kb
Views
32,384
  1. Custom FuzzySearch Previews
  2. Custom FuzzySearch HTML Codes
  3. Custom FuzzySearch JS Codes

How do I make an custom fuzzysearch?

What is a custom fuzzysearch? How do you make a custom fuzzysearch? This script and codes were developed by Kev Rousseau on 12 August 2022, Friday.

Custom FuzzySearch Previews
IQ Test

Custom FuzzySearch - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Custom FuzzySearch</title>
</head>
<body> <input id="fuzzy" type="text"/> <script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Custom FuzzySearch - Script Codes JS Codes

var _data = [ { "name": "Ortiz", "slug": "Harriett" }, { "name": "Clayton", "slug": "Ginger" }, { "name": "Noble", "slug": "Bettye" }, { "name": "Suzanne", "slug": "Rodriquez" }, { "name": "Ruby", "slug": "Terri" }, { "name": "Robyn", "slug": "Kennedy" }, { "name": "Bond", "slug": "Meyer" }, { "name": "Alyce", "slug": "Golden" }, { "name": "Shannon", "slug": "Alta" }, { "name": "Mercer", "slug": "Ada" }, { "name": "Jimmie", "slug": "Hansen" }, { "name": "Cobb", "slug": "Roach" }, { "name": "Geneva", "slug": "Cooke" }, { "name": "Tonia", "slug": "Erin" }, { "name": "Christina", "slug": "Louise" }, { "name": "Charlene", "slug": "Saundra" }, { "name": "Dolly", "slug": "Salazar" }, { "name": "Barrera", "slug": "Julianne" }, { "name": "Blevins", "slug": "Hicks" }, { "name": "Blair", "slug": "Lillie" }, { "name": "Adrienne", "slug": "Owens" }, { "name": "Mendoza", "slug": "Patrica" }, { "name": "Gates", "slug": "Sofia" }, { "name": "Maura", "slug": "Fisher" }, { "name": "Audrey", "slug": "Hughes" }, { "name": "Lucille", "slug": "Goodwin" }, { "name": "Aline", "slug": "Jaime" }, { "name": "Simone", "slug": "Leona" }, { "name": "Roy", "slug": "Ilene" }, { "name": "Alexander", "slug": "Maxwell" }, { "name": "Chang", "slug": "Ana" }, { "name": "Conrad", "slug": "Allison" }, { "name": "James", "slug": "Jacquelyn" }, { "name": "Greer", "slug": "Kim" }, { "name": "Bernard", "slug": "Snow" }, { "name": "Workman", "slug": "Buck" }, { "name": "Serena", "slug": "Velma" }, { "name": "Leanne", "slug": "Mcdaniel" }, { "name": "Bolton", "slug": "Mcfadden" }, { "name": "Branch", "slug": "Deena" }, { "name": "Mai", "slug": "Case" }, { "name": "Nettie", "slug": "Kathy" }, { "name": "Stacy", "slug": "Wendi" }, { "name": "Kate", "slug": "Erika" }, { "name": "Madeline", "slug": "Spears" }, { "name": "Watts", "slug": "Ochoa" }, { "name": "Evelyn", "slug": "Grimes" }, { "name": "Christian", "slug": "Norris" }, { "name": "Zamora", "slug": "Ayers" }, { "name": "Veronica", "slug": "Josephine" }
];
var a = function(options) { this.init = function(options) { //scoring works like golf, the lowest score wins this.options = options || {}; this.maxResults = this.options.maxResults || 3; this.attr = this.options.attr || "slug"; this.scoreMap = []; }; this.init(options); this.fuzzySearch = function(text) { //FIXME: "Kennedy" = 5 points, should be 6 points... calculating first "n" twice 1+2+2 //we should create a not copy of the slug text in data[i], and then remove the matching char in the slug, so that when we indexOf, we aren't matching more than once the char var chunks = text; //loop through the slugs in data, and loop in the chunks. // attribuate points based on indexOf char. Top {maxResults} lowest wins. var data = JSON.parse(JSON.stringify(_data)); for(var i = 0; i < data.length; i++) { for(var x = 0; x < chunks.length; x++) { var obj = _.find(this.scoreMap, {slug: _data[i][this.attr]}) || {}; var dataVal = data[i][this.attr].toLowerCase(); var chunkVal = chunks[x].toLowerCase(); var score = dataVal.indexOf(chunkVal); var found = score !== -1; //char found in slug if (found) { obj[this.attr] = _data[i][this.attr]; obj.score = _.isUndefined(obj.score) ? 0 + score : obj.score + score; //if object not already present in collection if (!_.find(this.scoreMap, {slug: _data[i][this.attr]})) { this.scoreMap.push(obj); } } //some char might have been found but some not //in this case, it doesn't match the searched text, so remove it if (!found && !_.isEmpty(obj)) { this.scoreMap = _.reject(this.scoreMap, obj); break; } if (!found) { break; } } } return this.getBestScored(this.scoreMap); }; this.getBestScored = function(data) { //sortby score from lowest value to -1 value (2,5,10,13,18,-1,-1) var bestScored =_.chain(data) .reject(function(item) {return item.score < 0;}) .sortBy('score') .first(this.maxResults) .value(); this.free(); return bestScored; }; this.free = function() { //re-init to reset values this.init(options); };
};
var app = new a({ maxResults: 10, attr: "slug"
});
$("#fuzzy").on("keyup", function() { console.clear(); console.log(app.fuzzySearch(this.value));
});
Custom FuzzySearch - Script Codes
Custom FuzzySearch - Script Codes
Home Page Home
Developer Kev Rousseau
Username kevrousso
Uploaded August 12, 2022
Rating 3
Size 3,018 Kb
Views 32,384
Do you need developer help for Custom FuzzySearch?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kev Rousseau (kevrousso) Script Codes
Name
Square animation on scroll with instant follow v2
Notifications
Event Dispatching example
Tutorial-Module
Menu example 2
1-Discover-Backpacker
Square animation on scroll
Menu example 1
Square animation on scroll with instant follow, fixed banner
Faster Custom Fuzzy Search
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!