Javascript ไม่ชัดเจนการค้นหาที่เหมาะสม


104

ฉันกำลังมองหาไลบรารี JavaScript การค้นหาที่คลุมเครือเพื่อกรองอาร์เรย์ ฉันได้ลองใช้fuzzyset.jsและfuse.jsแล้ว แต่ผลลัพธ์แย่มาก (มีการสาธิตที่คุณสามารถลองได้ในหน้าที่เชื่อมโยง)

หลังจากอ่านข้อมูลเกี่ยวกับระยะทาง Levenshtein แล้วมันทำให้ฉันรู้สึกแย่เพราะประมาณว่าผู้ใช้กำลังมองหาอะไรเมื่อพวกเขาพิมพ์ สำหรับผู้ที่ไม่ทราบว่าระบบจะคำนวณว่าหลายแทรก , ลบและแทนมีความจำเป็นที่จะทำให้สองสายตรง

ข้อบกพร่องที่เห็นได้ชัดอย่างหนึ่งซึ่งได้รับการแก้ไขในแบบจำลอง Levenshtein-Demerau คือทั้งblubและboobถือว่าใกล้เคียงกับbulb (แต่ละอันต้องใช้การทดแทนสองครั้ง) มันเป็นที่ชัดเจน แต่ที่หลอดไฟมีมากขึ้นคล้ายกับร้องไห้สะอึกสะอื้นกว่าคนโง่และเป็นรูปแบบที่ผมกล่าวถึงเพียงตระหนักดีว่าโดยให้transpositions

ฉันต้องการใช้สิ่งนี้ในบริบทของการเติมข้อความดังนั้นหากฉันมีอาร์เรย์['international', 'splint', 'tinder']และข้อความค้นหาของฉันเป็นintฉันคิดว่านานาชาติควรมีอันดับสูงกว่าเฝือกแม้ว่าในอดีตจะมีคะแนน (สูงกว่า = แย่กว่า) ถึง 10 เทียบกับของหลัง 3.

สิ่งที่ฉันกำลังมองหา (และจะสร้างขึ้นหากไม่มี) คือไลบรารีที่ทำสิ่งต่อไปนี้:

  • ให้น้ำหนักการปรับแต่งข้อความต่างๆ
  • การชั่งน้ำหนักแต่ละการจัดการจะแตกต่างกันไปขึ้นอยู่กับตำแหน่งที่ปรากฏในคำหนึ่ง (การปรับเปลี่ยนในช่วงแรกมีค่าใช้จ่ายสูงกว่าการจัดการในช่วงปลาย)
  • ส่งคืนรายการผลลัพธ์ที่เรียงตามความเกี่ยวข้อง

มีใครเจออะไรแบบนี้บ้าง? ฉันตระหนักดีว่า StackOverflow ไม่ใช่สถานที่ที่จะขอคำแนะนำซอฟต์แวร์ แต่โดยนัย (ไม่ใช่อีกต่อไป!) ในด้านบนคือ: ฉันคิดเกี่ยวกับวิธีนี้ถูกต้องหรือไม่?


แก้ไข

ฉันพบกระดาษดีๆ (pdf)ในหัวข้อนี้ หมายเหตุและข้อความที่ตัดตอนมาบางส่วน:

ฟังก์ชั่นการแก้ไขระยะห่างจะกำหนดต้นทุนที่ค่อนข้างต่ำให้กับลำดับการแทรกหรือการลบ

ฟังก์ชันระยะทาง Monger-Elkan (Monge & Elkan 1996) ซึ่งเป็นตัวแปรที่สัมพันธ์กันของฟังก์ชันระยะทาง Smith-Waterman (Durban et al. 1998) ที่มีพารามิเตอร์ต้นทุนเฉพาะ

สำหรับระยะทาง Smith-Waterman (วิกิพีเดีย) "แทนที่จะดูลำดับทั้งหมดอัลกอริทึม Smith – Waterman จะเปรียบเทียบส่วนของความยาวที่เป็นไปได้ทั้งหมดและปรับการวัดความคล้ายคลึงกันให้เหมาะสมที่สุด" เป็นแนวทาง n-gram

เมตริกที่คล้ายคลึงกันในวงกว้างซึ่งไม่ได้ขึ้นอยู่กับโมเดลระยะแก้ไขคือเมตริก Jaro (Jaro 1995; 1989; Winkler 1999) ในเอกสารบันทึกการเชื่อมโยงได้รับผลลัพธ์ที่ดีโดยใช้รูปแบบต่างๆของวิธีนี้ซึ่งขึ้นอยู่กับจำนวนและลำดับของอักขระทั่วไประหว่างสองสตริง

ตัวแปรนี้เนื่องจาก Winkler (1999) ยังใช้ความยาว P ของคำนำหน้าทั่วไปที่ยาวที่สุด

(ดูเหมือนจะมีไว้สำหรับสตริงสั้น ๆ เป็นหลัก)

เพื่อจุดประสงค์ในการกรอกข้อความวิธีการของ Monger-Elkan และ Jaro-Winkler ดูเหมือนจะเหมาะสมที่สุด การเพิ่มตัวชี้วัด Jaro ของ Winkler ช่วยให้น้ำหนักจุดเริ่มต้นของคำมีน้ำหนักมากขึ้นได้อย่างมีประสิทธิภาพ และแง่มุมของ Monger-Elkan หมายความว่าความจำเป็นในการเติมคำให้สมบูรณ์ (ซึ่งเป็นเพียงลำดับของการเพิ่มเติม) จะไม่ทำให้เสียอรรถรสมากเกินไป

สรุป:

การจัดอันดับ TFIDF ทำได้ดีที่สุดในบรรดาเมตริกระยะทางที่ใช้โทเค็นหลายตัวและเมตริกระยะการแก้ไข Affine-gap ที่ปรับแต่งแล้วที่เสนอโดย Monge และ Elkan ทำงานได้ดีที่สุดในบรรดาเมตริกระยะแก้ไขสตริง เมตริกระยะทางที่ดีอย่างน่าประหลาดใจคือรูปแบบการฮิวริสติกที่รวดเร็วซึ่งเสนอโดย Jaro และต่อมาขยายโดย Winkler สิ่งนี้ใช้งานได้เกือบเช่นเดียวกับโครงการ Monge-Elkan แต่ลำดับความสำคัญเร็วกว่า วิธีง่ายๆอย่างหนึ่งในการรวมวิธี TFIDF และ Jaro-Winkler คือการแทนที่การจับคู่โทเค็นที่แน่นอนที่ใช้ใน TFIDF ด้วยการจับคู่โทเค็นโดยประมาณตามรูปแบบ Jaro-Winkler ชุดค่าผสมนี้ทำงานได้ดีกว่า Jaro-Winkler หรือ TFIDF เล็กน้อยโดยเฉลี่ยและบางครั้งก็ทำงานได้ดีกว่ามาก นอกจากนี้ยังมีประสิทธิภาพใกล้เคียงกับการเรียนรู้ร่วมกันของเมตริกที่ดีที่สุดหลายรายการที่พิจารณาในเอกสารนี้


คำถามที่ดี ฉันต้องการทำสิ่งที่คล้ายกัน แต่มีข้อควรพิจารณาในการเปรียบเทียบสตริงเดียวกัน คุณเคยพบ / สร้างการใช้งานจาวาสคริปต์ของการเปรียบเทียบสตริงของคุณหรือไม่? ขอบคุณ.
nicholas

1
@nicholas ฉันเพียงแค่แยก fuzzyset.js บน github เพื่อพิจารณาสตริงการสืบค้นที่เล็กกว่าและแม้ว่าจะไม่ได้คำนึงถึงการปรับแต่งสตริงแบบถ่วงน้ำหนัก แต่ผลลัพธ์ก็ค่อนข้างดีสำหรับการประยุกต์ใช้สตริงให้เสร็จสิ้น ดูrepo
willlma

ขอบคุณ. ฉันจะลองดู ฉันยังพบสายนี้ฟังก์ชั่นเปรียบเทียบ: github.com/zdyn/jaro-winkler-js ดูเหมือนจะทำงานได้ดีเช่นกัน
nicholas

1
ลองสิ่งนี้: subtexteditor.github.io/fuzzysearch.js
michaelday

1
@michaelday นั่นไม่ได้คำนึงถึงการพิมพ์ผิด ในการสาธิตการพิมพ์kroleจะไม่กลับมาFinal Fantasy V: Krileแม้ว่าฉันจะต้องการก็ตาม ต้องการให้อักขระทั้งหมดในแบบสอบถามปรากฏในลำดับเดียวกันในผลลัพธ์ซึ่งค่อนข้างมีสายตาสั้น ดูเหมือนวิธีเดียวที่จะมีการค้นหาแบบคลุมเครือที่ดีคือการมีฐานข้อมูลของการพิมพ์ผิดทั่วไป
willlma

คำตอบ:


22

คำถามที่ดี! แต่ความคิดของฉันคือแทนที่จะพยายามแก้ไข Levenshtein-Demerau คุณอาจจะดีกว่าถ้าลองใช้อัลกอริทึมอื่นหรือรวม / ถ่วงน้ำหนักผลลัพธ์จากสองอัลกอริทึม

ทำให้ฉันประหลาดใจว่าการจับคู่แบบตรงทั้งหมดหรือใกล้เคียงกับ "คำนำหน้าเริ่มต้น" เป็นสิ่งที่ Levenshtein-Demerau ไม่ได้ให้น้ำหนักเป็นพิเศษ - แต่ความคาดหวังของผู้ใช้ที่ชัดเจนของคุณจะเป็นเช่นนั้น

ฉันค้นหาคำว่า "ดีกว่า Levenshtein" และเหนือสิ่งอื่นใดพบสิ่งนี้:

http://www.joyofdata.de/blog/comparison-of-string-distance-algorithms/

สิ่งนี้กล่าวถึงมาตรการ "ระยะทางสตริง" จำนวนหนึ่ง สามสิ่งที่ดูเกี่ยวข้องกับความต้องการของคุณเป็นพิเศษ ได้แก่ :

  1. ระยะห่างของสตริงย่อยทั่วไปที่ยาวที่สุด:จำนวนสัญลักษณ์ขั้นต่ำที่ต้องลบออกในทั้งสองสตริงจนกว่าสตริงย่อยที่ได้ผลลัพธ์จะเหมือนกัน

  2. ระยะทาง q-gram:ผลรวมของความแตกต่างที่แน่นอนระหว่างเวกเตอร์ N-gram ของทั้งสองสาย

  3. ระยะทาง Jaccard: 1 นาทีผลหารของ N-grams ที่ใช้ร่วมกันและ N-G ที่สังเกตได้ทั้งหมด

บางทีคุณอาจใช้การรวมกันแบบถ่วงน้ำหนัก (หรือขั้นต่ำ) ของเมตริกเหล่านี้กับ Levenshtein ซึ่งเป็นสตริงย่อยทั่วไป N-gram หรือ Jaccard ทั่วไปจะชอบสตริงที่คล้ายกันมากหรืออาจลองใช้ Jaccard

อัลกอริทึมเหล่านี้อาจมีราคาแพงพอสมควรทั้งนี้ขึ้นอยู่กับขนาดของรายการ / ฐานข้อมูลของคุณ สำหรับการค้นหาที่คลุมเครือฉันใช้ฉันใช้จำนวน N-g ที่กำหนดค่าได้เป็น "คีย์การดึงข้อมูล" จากฐานข้อมูลจากนั้นเรียกใช้การวัดระยะทางสตริงที่มีราคาแพงเพื่อเรียงลำดับตามความต้องการ

ฉันเขียนบันทึกเกี่ยวกับ Fuzzy String Search ใน SQL ดู:


68

ฉันลองใช้ไลบรารีฟัซซี่ที่มีอยู่เช่น fuse.js และพบว่ามันแย่มากดังนั้นฉันจึงเขียนอันที่ทำงานเหมือนการค้นหาของประเสริฐ https://github.com/farzher/fuzzysort

การพิมพ์ผิดเพียงอย่างเดียวที่อนุญาตคือการเปลี่ยนภาพ มันสวยของแข็ง(1k ดาว, 0 ปัญหา) , อย่างรวดเร็วและจัดการกับกรณีของคุณได้อย่างง่ายดาย:

fuzzysort.go('int', ['international', 'splint', 'tinder'])
// [{highlighted: '*int*ernational', score: 10}, {highlighted: 'spl*int*', socre: 3003}]


4
ฉันไม่พอใจกับ Fuse.js และลองใช้ห้องสมุดของคุณ - ใช้งานได้ดี! ทำได้ดีมาก :)
dave

1
ปัญหาเดียวกับห้องสมุดนี้ที่ฉันพบคือเมื่อคำนั้นสมบูรณ์ แต่สะกดไม่ถูกต้องเช่นหากคำที่ถูกต้องคือ "XRP" และหากฉันค้นหา "XRT" มันจะไม่ให้คะแนนฉัน
PirateApp

1
@PirateApp ใช่ฉันไม่จัดการการสะกดผิด (เพราะการค้นหาของประเสริฐไม่ได้) ตอนนี้ฉันกำลังมองหาสิ่งนี้ที่มีคนบ่น คุณสามารถให้ตัวอย่างกรณีการใช้งานที่การค้นหานี้ล้มเหลวเป็นปัญหา github
Farzher

3
สำหรับผู้ที่สงสัยเกี่ยวกับ lib นี้ตอนนี้มีการตรวจสอบการสะกดด้วยเช่นกัน! ฉันแนะนำ lib นี้มากกว่า fusejs และอื่น ๆ
PirateApp

1
@ user4815162342 คุณต้องเขียนรหัสด้วยตัวเอง ชำระเงินชุดนี้มีตัวอย่างรหัสgithub.com/farzher/fuzzysort/issues/19
Farzher

18

นี่คือเทคนิคที่ฉันใช้สองสามครั้ง ... มันให้ผลลัพธ์ที่ดีทีเดียว อย่าทำทุกอย่างที่คุณขอ นอกจากนี้อาจมีราคาแพงหากรายการมีขนาดใหญ่

get_bigrams = (string) ->
    s = string.toLowerCase()
    v = new Array(s.length - 1)
    for i in [0..v.length] by 1
        v[i] = s.slice(i, i + 2)
    return v

string_similarity = (str1, str2) ->
    if str1.length > 0 and str2.length > 0
        pairs1 = get_bigrams(str1)
        pairs2 = get_bigrams(str2)
        union = pairs1.length + pairs2.length
        hit_count = 0
        for x in pairs1
            for y in pairs2
                if x is y
                    hit_count++
        if hit_count > 0
            return ((2.0 * hit_count) / union)
    return 0.0

ส่งผ่านสองสตริงstring_similarityซึ่งจะส่งคืนตัวเลขระหว่าง0และ1.0ขึ้นอยู่กับว่ามีความคล้ายคลึงกันอย่างไร ตัวอย่างนี้ใช้ Lo-Dash

ตัวอย่างการใช้งาน ....

query = 'jenny Jackson'
names = ['John Jackson', 'Jack Johnson', 'Jerry Smith', 'Jenny Smith']

results = []
for name in names
    relevance = string_similarity(query, name)
    obj = {name: name, relevance: relevance}
    results.push(obj)

results = _.first(_.sortBy(results, 'relevance').reverse(), 10)

console.log results

นอกจากนี้ .... มีซอ

ตรวจสอบให้แน่ใจว่าคอนโซลของคุณเปิดอยู่หรือคุณจะไม่เห็นอะไรเลย :)


3
ขอบคุณนั่นคือสิ่งที่ฉันกำลังมองหา มันจะดีกว่าถ้ามันเป็น js ธรรมดาเท่านั้น;)
lucaswxp

1
ฟังก์ชัน get_bigrams (สตริง) {var s = string.toLowerCase () var v = s.split (''); สำหรับ (var i = 0; i <v.length; i ++) {v [i] = s.slice (i, i + 2); } กลับ v; } ฟังก์ชัน string_similarity (str1, str2) {if (str1.length> 0 && str2.length> 0) {var pair1 = get_bigrams (str1); var pair2 = get_bigrams (str2); วาร์ยูเนี่ยน = pair1.length + pair2.length; var hit = 0; สำหรับ (var x = 0; x <pair1.length; x ++) {สำหรับ (var y = 0; y <pair2.length; y ++) {if (pair1 [x] == pair2 [y]) hit_count ++ }} if (hit> 0) return ((2.0 * hits) / union); } return 0.0}
jaya

จะใช้สิ่งนี้ในวัตถุที่คุณต้องการค้นหาในหลาย ๆ ปุ่มได้อย่างไร?
user3808307

สิ่งนี้มีปัญหาเล็กน้อย: 1) น้ำหนักเกินอักขระที่จุดเริ่มต้นและจุดสิ้นสุดของสตริง 2) การเปรียบเทียบ bigram คือ O (n ^ 2) 3) คะแนนความคล้ายคลึงกันสามารถมากกว่า 1 ได้เนื่องจากการใช้งาน เห็นได้ชัดว่าไม่มีเหตุผล ฉันแก้ไขปัญหาเหล่านี้ทั้งหมดในคำตอบด้านล่าง
MgSam

9

นี่คือฟังก์ชันที่สั้นและกะทัดรัดของฉันสำหรับการจับคู่แบบคลุมเครือ:

function fuzzyMatch(pattern, str) {
  pattern = '.*' + pattern.split('').join('.*') + '.*';
  const re = new RegExp(pattern);
  return re.test(str);
}

แม้ว่าอาจจะไม่ใช่สิ่งที่คุณต้องการในกรณีส่วนใหญ่ แต่ก็เหมาะสำหรับฉัน
schmijos

คุณสามารถเพิกเฉยต่อคำสั่งซื้อได้หรือไม่? fuzzyMatch('c a', 'a b c')ควรกลับมาtrue
vsync

5

คุณสามารถดูได้ที่https://github.com/atom/fuzzaldrin/ lib ของ Atom

มันพร้อมใช้งานบน npm มี API ที่เรียบง่ายและทำงานได้ดีสำหรับฉัน

> fuzzaldrin.filter(['international', 'splint', 'tinder'], 'int');
< ["international", "splint"]

ฉันยังประสบความสำเร็จกับไลบรารีของ Atom ซึ่งมี API ที่เรียบง่ายและรวดเร็วทันใจ =) github.com/cliffordfajardo/cato
cacoder

2

อัปเดตเดือนพฤศจิกายน 2019 ฉันพบว่าฟิวส์มีการอัพเกรดที่ดีพอสมควร อย่างไรก็ตามฉันไม่สามารถทำให้มันใช้ตัวดำเนินการของบูล (เช่น OR, AND ฯลฯ ) และฉันไม่สามารถใช้อินเทอร์เฟซการค้นหา API เพื่อกรองผลลัพธ์ได้

ฉันค้นพบnextapps-de/flexsearch: https://github.com/nextapps-de/flexsearchและฉันเชื่อว่ามันเหนือกว่าไลบรารีการค้นหาจาวาสคริปต์อื่น ๆ จำนวนมากที่ฉันได้ลองใช้และมีการรองรับการboolกรองการค้นหาและการแบ่งหน้า

คุณสามารถป้อนรายการวัตถุจาวาสคริปต์สำหรับข้อมูลการค้นหาของคุณ (เช่นพื้นที่เก็บข้อมูล) และ API ได้รับการบันทึกไว้ค่อนข้างดี: https://github.com/nextapps-de/flexsearch#api-overview

จนถึงตอนนี้ฉันจัดทำดัชนีเกือบ 10,000 รายการและการค้นหาของฉันอยู่ถัดจากทันที กล่าวคือระยะเวลาที่ไม่สามารถสังเกตเห็นได้สำหรับการค้นหาแต่ละครั้ง


โครงการนี้มีการขยายตัว ( > 100kb) และมีปัญหาและการประชาสัมพันธ์ที่ยังไม่ได้เข้าร่วมจำนวนมาก ฉันจะไม่ใช้มันด้วยเหตุผลสองประการนั้น
vsync

2

นี่คือวิธีแก้ปัญหาโดย @InternalFX แต่ใน JS (ฉันใช้มันเพื่อแบ่งปัน):

function get_bigrams(string){
  var s = string.toLowerCase()
  var v = s.split('');
  for(var i=0; i<v.length; i++){ v[i] = s.slice(i, i + 2); }
  return v;
}

function string_similarity(str1, str2){
  if(str1.length>0 && str2.length>0){
    var pairs1 = get_bigrams(str1);
    var pairs2 = get_bigrams(str2);
    var union = pairs1.length + pairs2.length;
    var hits = 0;
    for(var x=0; x<pairs1.length; x++){
      for(var y=0; y<pairs2.length; y++){
        if(pairs1[x]==pairs2[y]) hits++;
    }}
    if(hits>0) return ((2.0 * hits) / union);
  }
  return 0.0
}

2

ฉันแก้ไขปัญหาด้วยโซลูชัน Bigram ของ CoffeeScript โดย InternalFx และทำให้เป็นโซลูชัน n-gram ทั่วไป (คุณสามารถกำหนดขนาดของกรัมได้เอง)

นี่คือ TypeScript แต่คุณสามารถลบคำอธิบายประกอบประเภทและใช้งานได้ดีเหมือนวานิลลา JavaScript เช่นกัน

/**
 * Compares the similarity between two strings using an n-gram comparison method. 
 * The grams default to length 2.
 * @param str1 The first string to compare.
 * @param str2 The second string to compare.
 * @param gramSize The size of the grams. Defaults to length 2.
 */
function stringSimilarity(str1: string, str2: string, gramSize: number = 2) {
  function getNGrams(s: string, len: number) {
    s = ' '.repeat(len - 1) + s.toLowerCase() + ' '.repeat(len - 1);
    let v = new Array(s.length - len + 1);
    for (let i = 0; i < v.length; i++) {
      v[i] = s.slice(i, i + len);
    }
    return v;
  }

  if (!str1?.length || !str2?.length) { return 0.0; }

  //Order the strings by length so the order they're passed in doesn't matter 
  //and so the smaller string's ngrams are always the ones in the set
  let s1 = str1.length < str2.length ? str1 : str2;
  let s2 = str1.length < str2.length ? str2 : str1;

  let pairs1 = getNGrams(s1, gramSize);
  let pairs2 = getNGrams(s2, gramSize);
  let set = new Set<string>(pairs1);

  let total = pairs2.length;
  let hits = 0;
  for (let item of pairs2) {
    if (set.delete(item)) {
      hits++;
    }
  }
  return hits / total;
}

ตัวอย่าง:

console.log(stringSimilarity("Dog", "Dog"))
console.log(stringSimilarity("WolfmanJackIsDaBomb", "WolfmanJackIsDaBest"))
console.log(stringSimilarity("DateCreated", "CreatedDate"))
console.log(stringSimilarity("a", "b"))
console.log(stringSimilarity("CreateDt", "DateCreted"))
console.log(stringSimilarity("Phyllis", "PyllisX"))
console.log(stringSimilarity("Phyllis", "Pylhlis"))
console.log(stringSimilarity("cat", "cut"))
console.log(stringSimilarity("cat", "Cnut"))
console.log(stringSimilarity("cc", "Cccccccccccccccccccccccccccccccc"))
console.log(stringSimilarity("ab", "ababababababababababababababab"))
console.log(stringSimilarity("a whole long thing", "a"))
console.log(stringSimilarity("a", "a whole long thing"))
console.log(stringSimilarity("", "a non empty string"))
console.log(stringSimilarity(null, "a non empty string"))

ลองใช้ใน TypeScript Playground


0
(function (int) {
    $("input[id=input]")
        .on("input", {
        sort: int
    }, function (e) {
        $.each(e.data.sort, function (index, value) {
          if ( value.indexOf($(e.target).val()) != -1 
              && value.charAt(0) === $(e.target).val().charAt(0) 
              && $(e.target).val().length === 3 ) {
                $("output[for=input]").val(value);
          };
          return false
        });
        return false
    });
}(["international", "splint", "tinder"]))

jsfiddle http://jsfiddle.net/guest271314/QP7z5/


0

ตรวจสอบส่วนเสริม Google ชีตของฉันที่ชื่อว่า Flookup และใช้ฟังก์ชันนี้:

Flookup (lookupValue, tableArray, lookupCol, indexNum, threshold, [rank])

รายละเอียดพารามิเตอร์คือ:

  1. lookupValue: คุณค่าที่คุณกำลังมองหา
  2. tableArray: ตารางที่คุณต้องการค้นหา
  3. lookupCol: คอลัมน์ที่คุณต้องการค้นหา
  4. indexNum: คอลัมน์ที่คุณต้องการส่งคืนข้อมูล
  5. threshold: เปอร์เซ็นต์ความคล้ายคลึงกันด้านล่างซึ่งไม่ควรส่งคืนข้อมูล
  6. rank: คู่ที่ดีที่สุดอันดับที่ n (เช่นถ้านัดแรกไม่ถูกใจคุณ)

สิ่งนี้ควรตอบสนองความต้องการของคุณ ... แม้ว่าฉันจะไม่แน่ใจเกี่ยวกับจุดที่ 2

ค้นหาข้อมูลเพิ่มเติมได้ที่เว็บไซต์อย่างเป็นทางการ


-1

Fuzzy Sort เป็นไลบรารีจาวาสคริปต์ที่มีประโยชน์ในการจับคู่สตริงจากชุดข้อมูลจำนวนมาก

รหัสต่อไปนี้จะเป็นประโยชน์ในการใช้การจัดเรียงที่ไม่ชัดเจนใน react.js

  1. ติดตั้งการจัดเรียงที่คลุมเครือผ่าน npm

    npm install fuzzysort
    
  2. สร้างตัวแปรอ้างอิง

    const fuzzysort = require('fuzzysort')
    
  3. ใช้วิธี go () เพื่อค้นหาสตริงที่ตรงกัน

    search(keyword, category) {  
      return fuzzysort.go(keyword, data[category]);
    }
    

โค้ดสาธิตแบบเต็มใน react.js

import React from 'react';
import './App.css';
import data from './testdata';
const fuzzysort = require('fuzzysort');

class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      keyword: '',
      results: [],
    }
    console.log("data: ", data["steam_games"]);
  }

  search(keyword, category) {  
    return fuzzysort.go(keyword, data[category]);
  }

  render(){
    return (
      <div className="App">
        <input type="text" onChange={(e)=> this.setState({keyword: e.target.value})}
          value={this.state.keyword}
        />
        <button onClick={()=>this.setState({results: this.search(this.state.keyword, "steam_games")})}>Search</button>
        {this.state.results !== null && this.state.results.length > 0 ?
          <h3>Results:</h3> : null
        }
        <ul>
        {this.state.results.map((item, index) =>{
            return(
              <li key={index}>{item.score} : {item.target}</li>
            )
          })
        }
        </ul>
      </div>
    );
  }
}

export default App;

สำหรับข้อมูลเพิ่มเติมโปรดดูFuzzySort


นั่นเป็นเพียงสำเนาของไลบรารีต้นฉบับเท่านั้น: github.com/farzher/fuzzysort
Vladan

คุณไม่ได้ตรวจสอบ repo ของฉัน ที่นี่ฉันใช้แพ็คเกจ fuzzysort ในการตอบสนอง ไม่มีโซลูชันเริ่มต้นสำหรับการรวม fuzzysort นั้นในการตอบสนอง
Codemaker
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.