代码之家 › 专栏 › 技术社区 › Wonka

在javascript中按正确的顺序筛选国家?

mobx javascript

Wonka · 技术社区 · 5 年前

我有一个国家名单,我正在筛选,以获得最佳匹配的结果,首先根据输入项。我用两个例子来说明这个问题。搜索术语 unit 或 in 您将看到预期的返回国家名称顺序不正确。预期结果是返回以 term 在这一优先权之后,将部分 学期 字符串匹配。这是两个密码 terms ,当前结果以及以下前2条评论中的预期结果:

const {observable, action, computed} = mobx;
const {observer} = mobxReact;

@observer
class Country extends React.Component {
    /*
     1. Type term: 'unit'
        Results:
        - Emirates, The United Arab
        - United States
        - The United Kingdom
        SHOULD BE:
        - United States (this should be first since it starts with the term 'unit')
        - The United Kingdom (this should be second since term 'unit' occurs in the name before "Emirates, The United Arab")
        - Emirates, The United Arab

     2. Type term: 'in'
        Results:
        - China
        - India
        - The United Kingdom
        SHOULD BE:
        - India (this should be first since it starts with the term 'in')
        - China (this should be second since 'in' term occurs in the name before "The United Kingdom")
        - The United Kingdom
    */

    @observable filterTermValue = '';
    @observable countriesList = [
      {'slug': 'amsterdam', 'name': 'Amsterdam'},
      {'slug': 'china', 'name': 'China'},
      {'slug': 'uae', 'name': 'Emirates, The United Arab'},
      {'slug': 'iceland', 'name': 'Iceland'},
      {'slug': 'india', 'name': 'India'},
      {'slug': 'usa', 'name': 'United States'},
      {'slug': 'uk', 'name': 'The United Kingdom'},
      {'slug': 'vienna', 'name': 'Vienna'}
    ];

    @computed get filtered() {
      let filteredList = this.countriesList.filter(
        t=>t.name.toLowerCase().indexOf(this.filterTermValue)>-1
      );

      return filteredList;
    }

    render() {
        return (
          <div>
              Term: <input placeholder="Start typing country"
                 onKeyUp={this.onChangeFilterTerm} />

              {this.filtered.map(country =>
                  <div key={country.slug}>
                    <p>{country.name}</p>
                  </div>
              )}
          </div>
        )
    }


    @action onChangeFilterTerm = (e) => {
        this.filterTermValue = e.target.value.toLowerCase();
    }
}

ReactDOM.render(
  <Country />,
  document.body
);

这是 fiddle

知道如何更新 filtered() 函数是否正确返回预期结果?

2 回复 | 直到 5 年前

mgarcia 5 年前

filtered

@computed get filtered() {
    return this.countriesList
        .filter(t => t.name.toLowerCase().indexOf(this.filterTermValue) >-1)
        .sort((a, b) => a.name.toLowerCase().indexOf(this.filterTermValue) - b.name.toLowerCase().indexOf(this.filterTermValue));
}

Ivan Klymchuk 5 年前

@computed get filtered() {
  let filteredList = this.countriesList.filter(
    t=>t.name.toLowerCase().indexOf(this.filterTermValue)>-1
  ).sort(
    (a, b) => a.name.toLowerCase().indexOf(this.filterTermValue) - b.name.toLowerCase().indexOf(this.filterTermValue)
  );