jQuery逻辑按单词匹配数对选择选项进行排序 [英] Jquery logic to sort select options by number of word matches

问题描述

我想要类似于Mysql的数据排序方式，但是在jquery中.我有一个输入和一个选择标签，就像这样-

I want something similar to Mysql's sorting of data, but in jquery. I have an input and a select tag, like this -

我希望根据输入文本的值对选择选项进行过滤和排序.

I want the select options to be filtered and sorted depending on the input text's value.

• 过滤或应用于输入文本的逻辑或保留至少包含一个单词的所有那些选项
• 排序/分组，然后按匹配数对其余选项进行排序，以使包含输入中所有单词的选项出现在顶部，然后是那些单词少的选项，依此类推.以下仅是一个示例，可能并不准确-

• Filtration OR logic to be applied on the input text and all those options to be kept which contain at least one word
• Sorting/Grouping then sort the remaining options by number of matches, such that options containing all the words as in the input appear at the top, followed by those with one less words and so on. Following is just an illustration and may not be exact -

我已经完成了过滤部分的逻辑.现在是分类部分，我不确定该怎么做.

I am done with the logic of the filtration part. Now comes the sorting part and I am not sure how to do.

以一个示例为例，说输入文本张贴了一个5字的字符串.我不知道jQuery中是否有类似于Mysql的顺序的东西，可以通过它返回排序后的选项.所以，我的逻辑就是这样(伪代码)-

Taking an example, say input text posted a string of 5 words. I don't know if there something in jQuery similar to Mysql's order by which can return me the sorted options. So, my logic is like this (pseudocode)-

var numberOfWords;
sortedOptions = new Array();
for(cnt=numberOfWords; cnt>0; cnt --)
{
    find options containing exactly those many words
    append them to array sortedOptions
}

现在考虑numberOfWords = 5且cnt = 3的情况. 3个单词有很多可能的组合，我需要检查以准备3个单词匹配的选项.很好，但是当单词数增加时，代码的时间复杂度如何?有更好的优化方法吗?

Now consider the case where numberOfWords = 5 and cnt=3. There are many possible combinations of 3 words, which I need to check to prepare the options with 3 word matches. That's fine but what about the time complexity of the code, when the number of words increases? Is there a better optimized way?

请注意-可能需要在用户键入时(在每个按键上)进行此检查，而我却无法如此频繁地访问后端数据库.我还没有找到用于相同目的的现成插件.请检查我之前的问题

Please note - This checking may need to be done while the user is typing (on every key up) and I can't hit the backend database so frequently. I have not yet found any readymade plugin for the same purpose. Please check my earlier question Any jquery 1.3 compatible plugin to filter dropdown using user text input plus grouping based on number of input strings matched regarding this. If you know any plugin which can solve the problem please post there. But looking forward for a solution to this anyway.

谢谢

推荐答案

与此类似的事情(不能完全起作用):

Something along the lines of this (doesn't completely work):

$(function(){
  var $select = $('#mySelectBox'), nonMatches = [], $text = $('#myTextBox').keyup(function(){
      // find all the words
      var words = $text.val().split(' '), options = []
    // nonMatches is an array of <option>s from the prev search that didn't match
    // we put them back in the <select>
    for (var i in nonMatches)
      $select.append(nonMatches[i])
    nonMatches = []
    // and clear all the old labels like "1 word match"
    $select.find('optgroup').each(function(){
      var $this = $(this)
      $this.replaceWith($this.html())
    })
    // if the textbox is blank, dont need to search
    if (!words.length)
      return
    // loop thru each <option>
    $select.find('option').each(function(){
      var wordCount = 0, $this = $(this), html = ' ' + $this.html().toLowerCase() + ' '
      // loop thru each word and check if the <select> contains that word
      for (var i in words) {
        if (html.indexOf(' ' + words[i].toLowerCase() + ' ') > -1)
          wordCount++
      }
      // if this <option> doesn't have any of the words, save and remove it
      if (wordCount == 0)
        nonMatches.push($this.remove())
      else {
        // otherwise, save it to be sorted
        if (!options[wordCount])
          options[wordCount] = []
        options[wordCount].push($this.remove())
      }
    })
    // the options array holds all the <option>s that match; we need to sort it
    keys = [], sortedOptions = []
    for (var i in options) {
      keys.push(i)
    }
    keys.sort()
    keys.reverse()
    for (var i in keys)
      sortedOptions[keys[i]] = options[keys[i]]
    for (var i in sortedOptions) {
      // put the matches in the <select>
      $select.append('<optgroup label="' + (i == words.length ? 'All' : i) + ' word match">')
      for (var j in sortedOptions[i]) {
        $select.append(sortedOptions[i][j])
      }
      $select.append('</optgroup')
    }
  })
})

这篇关于jQuery逻辑按单词匹配数对选择选项进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！