首页 > 解决方案 > 尝试在 Javascript (Twine) 中创建一个简单的基于关键字的搜索栏

问题描述

我正在尝试使用 Javascript 在 Twine 故事中创建一个简单的基于关键字的搜索功能。使用本指南我有一些功能,但我正在尝试稍微修改它。我希望搜索输出所有匹配项,而不仅仅是最高匹配项,或者至少是前 5 个最高匹配项。谁能帮我这个?不幸的是,我对 Javascript 不是很熟悉,因此试图弄清楚要更改什么,然后将其更改为什么非常困难。


window.SearchTerm = window.SearchTerm || function (h, descr, kw) {
    'use strict';
    
    if (this instanceof SearchTerm) {
        this.handle      = h;
        this.description = descr;
        this.keywords    = kw;
    } else {
        return new SearchTerm(h, descr, kw);
    }
};

SearchTerm.add = function (h, descr, kw) {
    termList.push(new SearchTerm(h, descr, kw));
};

SearchTerm.prototype = {
    
    compare : function (stringArray) {
        var term = this;
        var matches = (function () {
            var ret = 0;
            stringArray.forEach( function (str) {
                if (term.keywords.includes(str)) {
                        ret++;
                }
            });
            return ret;
        }());
        
        return matches;
        
    },
    
    constructor : window.SearchTerm
};

$(document).on('change', 'input[name=search-box]', function (e) {
    var string = $(this).val(),
            matches = [], i, n = -1, highest = 0, content;
    
    string = string.replace(/[^A-Za-z0-9\s]/, ' ');
    string = string.replace(/[\s\s+]/, ' ');
    string = string.trim();
    string = string.split(' ');
    
    termList.forEach( function (term) {
        matches.push(term.compare(string));
    });
    
    for (i = 0; i < matches.length; i++) {
        if (matches[i] > n) {
            n = matches[i];
            highest = i;
        }
    }
    
    if (n <= 0) {
        content = '';
    } else {
        content = termList[highest].handle + ': ' + termList[highest].description;
    }
    
    $('#output')
        .empty()
        .append(content);
});

// add your search terms here...
SearchTerm.add('Test', '#000', ['test', 'testing']);
SearchTerm.add('Test', '#001', ['test', 'testing']);
SearchTerm.add('Test', '#002', ['test', 'testing']);
// etc.

标签: javascriptsearchtwine

解决方案


推荐阅读