Question

我想询问是否有更快的方法在2D排序数组中查找元素。 2D数组按字母顺序排序。该数组包含大约900个元素。以下是数组包含的数据示例：

[["Alphabit","ABC"],["ABNCoin","ABN"],["Crown","CRW'],["Cyder","CYDER"],["Agrello","DELTA"]]

就像你可以看到我按字母顺序排序第二个值。

我想要的是用户可以在顶部的搜索栏中键入内容，然后我将在匹配的值之后开始在数组中搜索。这些比赛将向该人展示。

我对比赛的意思。如果有人在搜索栏中输入字母A，我会显示结果：

Alphabit，ABC
ABNCoin，ABN
Agrello，DELTA

如果有人在搜索栏中输入字母T，我会显示结果：

Agrello，DELTA
Alphabit，ABC

所以我的意思是，如果其中一个值中有一个字母，我会表明它。 HTML数据已经在HTML中。并且他们在数组中匹配I值：

这是我的JQuery代码：

var searchAfterCoin = function () {
    var data = $('#searchBar').val().toLowerCase();
    if (data === '' || data === ' ') {
        showEverthing(searchArrayOfNames.length);
    }
    else {
        hideEverthing(searchArrayOfNames.length);
        for (var i = 0; i < searchArrayOfNames.length; i++) {
            var longName = searchArrayOfNames[i][0].toLowerCase();
            var shortName = searchArrayOfNames[i][1].toLowerCase();
            if (longName.indexOf(data) >= 0 && shortName.indexOf(data) >= 0) {
                $("#" + i + "").show();
            }
            else {
                if (longName.indexOf(data) >= 0) {
                    $("#" + i + "").show();
                }
                else {
                    if (shortName.indexOf(data) >= 0) {
                        $("#" + i + "").show();
                    }
                }
            }
        }
    }
};

这是我的HTML代码示例：

    <div class="row" id="13"> // some Data in here// </div>

您可以看到数组中匹配值的索引与HTML中的id匹配。

有没有使用更快的算法来查找元素？隐藏和显示元素的方法不够快，或者在开始搜索并将其附加到html时创建html更好吗？

Answer 1

我对更好的算法不太确定，但你当然可以让你的代码更短更简单。

var matches = searchArrayOfNames.reduce(function(p,c,i){
        if(c[0].toLowerCase().indexOf(data)>-1 || c[1].toLowerCase().indexOf(data)>-1) 
           p.push(i.toString())
        return p;
},[]);
$('div.row').filter(function(){
    return matches.indexOf(this.id)>-1;
}).show();

这里的概念是使用reduce来查找与输入匹配的元素的索引，然后使用jquery filter来查找基于此matches数组的元素。

＆＃13;

var searchArrayOfNames = [["Alphabit","ABC"],["ABNCoin","ABN"],["Crown","CRW"],["Cyder","CYDER"],["Agrello","DELTA"]];


var searchAfterCoin = function () {

    var data = $('#searchBar').val().toLowerCase();
    if (data === '' || data === ' ') {
        showEverthing(searchArrayOfNames.length);
    }
    else {
        hideEverthing(searchArrayOfNames.length);
        var matches = searchArrayOfNames.reduce(function(p,c,i){
            if(c[0].toLowerCase().indexOf(data)>-1 || c[1].toLowerCase().indexOf(data)>-1) 
               p.push(i.toString())
            return p;
        },[]);
        $('div.row').filter(function(){
            return matches.indexOf(this.id)>-1;
        }).show();       
    }
};
$('#searchBar').on('keyup',searchAfterCoin)

function showEverthing(){
    $('div').show();
}

function hideEverthing(){
    $('div').hide();
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
 <input id="searchBar" type="text" />
 
 <div class="row" id="0"> Alphabit data </div>
 <div class="row" id="1"> ABNCoin data </div>
 <div class="row" id="2"> Crown data </div>
 <div class="row" id="3"> Cyder data </div>
 <div class="row" id="4"> Agrello data </div>

＆＃13;

Answer 2

$(function () {
	var searchArrayOfNames = [["Alphabit", "ABC"], ["ABNCoin", "ABN"], ["Crown", "CRW"], ["Cyder", "CYDER"], ["Agrello", "DELTA"]];

	/* creating li for each choices ...*/
	searchArrayOfNames.forEach((e, i) => {
		$(`<li id="choice-${i}">${e.join(', ')}</li>`).appendTo($('#choices'));
	});

	/* THE CODE, you need to look into .... */
	$("#searchBar").on('change keydown paste input', function (event) {
		var searchText = ($('#searchBar').val() || '').toLowerCase();
		
		searchArrayOfNames.forEach((names, i) => {
			// if search text is null/empty/undefined or any text in a row matches, then show...
			// else hide ..
			(!searchText || names.some((name) => name.toLowerCase().indexOf(searchText) > -1))
			? $(`#choice-${i}`).show()
			: $(`#choice-${i}`).hide();
		});
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input id="searchBar"/>
<ul id="choices"></ul>

有没有更快的方法来查找2D排序数组中的元素

2 个答案: