{"id":17161,"date":"2021-06-22T05:32:52","date_gmt":"2021-06-22T03:32:52","guid":{"rendered":"http:\/\/blog.wenzlaff.de\/?p=17161"},"modified":"2026-04-19T07:38:29","modified_gmt":"2026-04-19T05:38:29","slug":"twarztsuche","status":"publish","type":"post","link":"http:\/\/blog.wenzlaff.de\/?p=17161","title":{"rendered":"Dynamische Fuzzy-Suche mit Fuse.js in Json Daten mit React App TWArztSuche"},"content":{"rendered":"

Eine Suche in Datenbest\u00e4nden ist keine einfache Sache! Mit Fuse.js<\/a> ist ein Suche mit Fuzzylogik<\/a> m\u00f6glich. Fuse.js ist eine m\u00e4chtige Lib ohne viele Abh\u00e4ngigkeiten.<\/p>\n

Eine suche mit Fuzzylogik ist eine unscharfe<\/strong> Suche und wird z. B. in der Automatisierungstechnik, Medizintechnik, Unterhaltungselektronik, KI, Fahrzeugtechnik und anderen Bereichen der Regelungstechnik verwendet. Zum Beispiel suchen wir nach dem Ort: Hameln<\/strong> und es werden uns auch Ergebnisse aus Hannover<\/strong> angezeigt. Beide beginnen mit Ha.<\/p>\n

Wir programmieren mal Beispielsweise eine Arztsuche mit einfache Gui, wie bei Google, mit nur einem Eingabefeld. So soll die Seite aussehen, und ein Eintrag ist auch gleich die Online-Hilfe:<\/p>\n

\"\"<\/p>\n

Das Ergebnis, wenn wir z.B. nach An\u00e4sthesie suchen sieht dann so aus bei den 5 Beispiel Datens\u00e4tzen: <\/p>\n

\"\"<\/p>\n

Es k\u00f6nnen einige erweiterte Optionen f\u00fcr die Suche verwendet werden, wie hier beschrieben. Zum beispiel k\u00f6nnte auch eine CaseSensitive Suche aktiviert werden. In dem Beispiel der Arztsuche ist die erweiterte Suche aktiviert. D.h. es k\u00f6nnen Operatoren wie AND ( | ) oder OR verwendet werden. Oder auch Inverse genaue Suche mit !Hameln. Also alles ausser Hameln. Oder =Hameln nur genau die aus Hameln.<\/p>\n

Die Daten kommen aus einer Json-Datei daten.json (Testdatei)<\/a> mit folgenden Format f\u00fcr jeden Arzt:<\/p>\n

\r\n\r\n[\r\n\t{\r\n\t\t\"fachgebiet1\": \"weiteres Fachgebiet 1\",\r\n\t\t\"krhsName\": \"Online Hilfe: Klinik Export 20.6.2021\",\r\n\t\t\"arztNr\": \"Nr\",\r\n\t\t\"fachgebiet\": \"Fachgebiet\",\r\n\t\t\"fachgebiet3\": \"weiteres Fachgebiet 3\",\r\n\t\t\"fachgebiet2\": \"weiteres Fachgebiet 2\",\r\n\t\t\"krhsOrt\": \"Ort\",\r\n\t\t\"arztSpezielleKompetenz\": \"Spezielle Kompetenz\",\r\n\t\t\"arztSuchbegriffe\": \"Suchbegriffe\",\r\n\t\t\"krhsStrNr\": \"Strasse + Nr.\",\r\n\t\t\"krhsPlz\": \"PLZ\",\r\n\t\t\"krhsUrl\": \"Link Klinikseite\"\r\n\t}, ...\r\n<\/pre>\n
Es muss npm und node.js installiert sein. Fuse.js kann mit <\/p>\n
npm install –save fuse.js<\/strong><\/p>\n
installiert werden. Nach der Installation kann ein<\/p>\n
npm run test <\/strong><\/p>\n
ausgef\u00fchrt werden um einen ersten Junit-Test zu starten.<\/p>\n
Ein Ergebnis Satz wird so gerendert:<\/p>\n
\r\n\r\n              <li className=\"daten-satz\" key={ arztNr.toString() }>\r\n                <ul className=\"character-meta\">                   \r\n                  <li><div className=\"arztNummer\">{ arztNr }<\/div><\/li>\r\n                  <li><div className=\"bold\">{ krhsName }<\/div><\/li>\r\n                  <li><div className=\"description\">{ krhsStrNr }<\/div><\/li>\r\n                  <li><div className=\"description\">{ krhsPlz } { krhsOrt }<\/div><\/li>\r\n                  <li><a className=\"link\" href={krhsUrl}>{ krhsUrl }<\/a><\/li>\r\n                  <li><div>{ fachgebiet } {addKomma( fachgebiet1 )} {addKomma( fachgebiet2 )} {addKomma( fachgebiet3 )}<\/div><\/li> \r\n                  <li><div>{ arztSpezielleKompetenz }<\/div><\/li>                              \r\n                  { ifSuchbegriff(arztSuchbegriffe) }\r\n                <\/ul>\r\n              <\/li>\r\n<\/pre>\n
Das ganze Projekt gibt es auf Gitlab<\/a> zum kostenlosen Download.<\/p>\n","protected":false},"excerpt":{"rendered":"
Eine Suche in Datenbest\u00e4nden ist keine einfache Sache! Mit Fuse.js ist ein Suche mit Fuzzylogik m\u00f6glich. Fuse.js ist eine m\u00e4chtige Lib ohne viele Abh\u00e4ngigkeiten. Eine suche mit Fuzzylogik ist eine unscharfe Suche und wird z. B. in der Automatisierungstechnik, Medizintechnik, Unterhaltungselektronik, KI, Fahrzeugtechnik und anderen Bereichen der Regelungstechnik verwendet. Zum Beispiel suchen wir nach dem … <\/p>\n
\u201eDynamische Fuzzy-Suche mit Fuse.js in Json Daten mit React App TWArztSuche\u201c <\/span>weiterlesen<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[220,3137,79],"tags":[377,4954,4953,4462,88],"class_list":["post-17161","post","type-post","status-publish","format-standard","hentry","category-anleitung","category-javascript","category-programmierung","tag-build","tag-fuse-js","tag-js","tag-react","tag-suchen"],"_links":{"self":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts\/17161","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=17161"}],"version-history":[{"count":0,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=\/wp\/v2\/posts\/17161\/revisions"}],"wp:attachment":[{"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=17161"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=17161"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.wenzlaff.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=17161"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}