根据搜索输入按字母顺序对数组进行排序答案

【问题标题】：Sort an array alphabetically based on a search input根据搜索输入按字母顺序对数组进行排序
【发布时间】：2018-03-22 00:53:01
【问题描述】：

如果我有一个数组，例如：

["Adambb", "Andrebw", "Bob", "Billy", "Sandrab", "Xaviercb"]

然后我在搜索框中输入（例如）“B”，如何在 JavaScript 中重新排序数组，并首先使用与最接近的字符串匹配的结果（也按字母顺序排列）？

例如，在搜索框中输入“B”会将数组重新排序为：

["Billy", "Bob", "Adambb", "Andrebw", "Sandrab", "Xaviercb"]

我希望数组重新排序，就像任何搜索系统都应该工作一样。出于某种原因，我在网上的任何地方都找不到这个答案。要么我没有正确地提出我的问题，要么我找不到与我的问题相似的任何内容。

【问题讨论】：

使用array.sort()并传入一个函数来选择最接近“b”的函数
最接近“b”是什么意思？
获取搜索词的字符代码，例如"b".charCodeAt(0);并在排序函数中执行相同的操作，使用最接近“b”字符代码的 charCode。
我应该补充一点，搜索词可以是任意数量的字符。

标签： javascript jquery arrays sorting

【解决方案1】：

另一种方法是检查字符串是否以输入的值开头，并决定顺序。

当a 和b 以输入的值开头时进行字符串比较。
如果 a 以输入的值开头，而 b 没有，则将 a 放在开头。
如果b 以输入的值开头而a 不是，则将b 放在开头。
否则，进行默认字符串比较。

var array = [{id: "157", tag: "Adambb", course: "Adambb - Calculus I"}, {id: "158", tag: "Andrebw", course: "Andrebw - Ca I"}, {id: "159", tag: "Bob", course: "Bob - Cass I"}, {id: "160", tag: "Billy", course: "Billy - uus I"}, {id: "161", tag: "Sandrab", course: "Sandrab - allus I"}, {id: "162", tag: "Xaviercb", course: "Xaviercb - Cal I"}];

var input = 'Sa'; // Changed to illustrate the behavior.

var sorted = array.sort((a, b) => {
   if (a.course.startsWith(input) && b.course.startsWith(input)) return a.course.localeCompare(b.course);
   else if (a.course.startsWith(input)) return -1;
   else if (b.course.startsWith(input)) return 1;
     
   return a.course.localeCompare(b.course);;
});

console.log(sorted);

.as-console-wrapper { max-height: 100% !important; top: 0; }

另一种方法是检查字符串是否包含输入的值并决定顺序。

当a 和b 包含输入的值时进行字符串比较。
如果a 包含输入的值而b 不包含，则将a 放在开头。
如果b 包含输入的值而a 不包含，则将b 放在开头。
否则，进行默认字符串比较。

var array = [{id: "157", tag: "Adambb", course: "Adambb - Calculus I"}, {id: "158", tag: "Andrebw", course: "Andrebw - Ca I"}, {id: "159", tag: "Bob", course: "Bob - Cass I"}, {id: "160", tag: "Billy", course: "Billy - uus I"}, {id: "161", tag: "Sandrab", course: "Sandrab - allus I"}, {id: "162", tag: "Xaviercb", course: "Xaviercb - Cal I"}];

var input = 'r'; // Changed to illustrate the behavior.

var sorted = array.sort((a, b) => {
   if (a.course.indexOf(input) !== -1 && b.course.indexOf(input) !== -1) return a.course.localeCompare(b.course);
   else if (a.course.indexOf(input) !== -1) return -1;
   else if (b.course.indexOf(input) !== -1) return 1;
     
   return a.course.localeCompare(b.course);
});

console.log(sorted);

.as-console-wrapper { max-height: 100% !important; top: 0; }

【讨论】：

@Ele 澄清一下，我的数组实际上是一个对象数组。我可能应该在问题中提到这一点，但我认为这并不重要。例如，[ {id: "157", tag: "MAT 101", course: "MAT 101 - Calculus I"} ... {...} ]。我想根据course 与搜索词的匹配方式对对象进行排序。我已经修改了您的代码，使其看起来像 if (a['course'].indexOf(input) ...，但是，它根本没有排序。你知道为什么它不适用于对象数组吗？
@Nic 我正在验证。
这真的很奇怪，但由于某种原因我的仍然没有。这是我在打印出array 时在控制台中看到的内容：(2103) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …] [0 … 99] [100 … 199]... 如果我打开我看到的索引之一：{id: "157", tag: "MAT 101", course: "MAT 101 - Calculus I"}。但是，当我在数组上运行代码并记录输出时，它会返回相同的数组而不进行排序。排序过程中也没有错误。
另外，奇怪的是我只是逐字逐句运行你的代码，它没有使用b的输入进行排序...
啊。它区分大小写。这说明了一切。

【解决方案2】：

假设您想在 javascript 中执行此操作。您可以使用可以作为参数传递给 Array.sort 方法的 compareFunction。

var compareFunction = function(a, b) {
  if (a.indexOf('B') < b.indexOf('B')) {
     return 1
  } else {
     return -1
  }
}
var arrToSort = ["Adambb", "Andrebw", "Bob", "Billy", "Sandrab", "Xaviercb"];
console.log(arrToSort.sort(compareFunction));

【讨论】：

【解决方案3】：

这将使您入门。它获取 first 字符字符代码 (ASCII) 并按与该代码的距离排序。您将希望通过对字符串中的所有字符执行此操作来改进它，而不仅仅是第一个字符（第零索引）。请记住，它不考虑小写字母。您可以使用 String.toLowerCase() 来改善这一点。

let arr = ["Adambb", "Andrebw", "Bob", "Billy", "Sandrab", "Xaviercb"];
let arrCodes = arr.map(s=>({code:s.charCodeAt(0), value:s}));
let searchInput = document.getElementById("search-input");
searchInput.addEventListener("change", function(){
  let val = this.value;
  if(val){
    const code = val.charCodeAt(0);
    let sorted = arrCodes.sort(function(a, b){
      let distA = Math.abs(a.code-code);
      let distB = Math.abs(b.code-code);
      return distA-distB;
    });
    final = sorted.map(s=>s.value);
    console.log("sorted:", final);
  }
}, false);

.as-console-wrapper {
  max-height: calc(100vh - 50px) !important;
}

&lt;input id="search-input" type="text" maxlength="1"&gt;

【讨论】：

【解决方案4】：

这是一个执行过滤排序的示例 sn-p。可能需要更多的细化。此外，我没有考虑此解决方案中的大小写，因此区分大小写。

所以基本上在您的排序函数中，您评估以下条件：

x 以过滤值开头，但不是 y；
x 不是以过滤器值开头，但 y 是；
x 和 y 都以过滤值开头；所以你想在删除过滤器值后开始与字符串的部分进行比较；
x 和 y 都不以过滤值开头；您希望根据正常排序保留其位置。

<!DOCTYPE html>
<html>
<body>

<input id="textFilter" type="text"/>
<button onclick="myFunction()">Try it</button>

<p id="demo"></p>

<script>
var names = ["Adambb", "Andrebw", "Bob", "Billy", "Sandrab", "Xaviercb"];
document.getElementById("demo").innerHTML = names;

function myFunction() {
	var filterValue = document.getElementById("textFilter").value;
        
  // sort with a function
	names.sort(function(x,y) {    	
        if( x.startsWith(filterValue) && !y.startsWith(filterValue))
        {
        	return -1;
        }
        else if (!x.startsWith(filterValue) && y.startsWith(filterValue))
        {
        	return 1;
        }
        else if(x.startsWith(filterValue) && y.startsWith(filterValue))
        {
        	var x2 = x.substring(filterValue.length-1);
          var y2 = y.substring(filterValue.length-1);
            
            return x2 > y2;
        }
        else
        {
        	return x > y;
        }
    });
    document.getElementById("demo").innerHTML = names;
}
</script>

</body>
</html>

【讨论】：