2

Railsアプリにアルゴリア検索を使用しています。 typehead.jsを使用して自動補完メソッドを立ち上げました。しかし、URLに大文字があると正しくリダイレ​​クトできません...これが私のコードです:

    // replace YourIndexName by the name of the index you want to query.
var index = algolia.initIndex('Pin');

// Mustache templating by Hogan.js (http://mustache.github.io/)
var template = Hogan.compile('<div class="hit">' +
  '<a href="http://yhumans.com/{{{twitter}}}">'
 +
  '<div class="small-text">' +
    '{{{ _highlightResult.name.value }}} ' +
  '</div>' +
  '<div class="small-text">' +
    '@' +
    '{{{ _highlightResult.twitter.value }}} ' +
  '</div>' +
  '</a>' +
  '</div>');


// typeahead.js initialization
$('#user-search').typeahead(null, {
  source: index.ttAdapter({ hitsPerPage: 5 }),

  displayKey: 'twitter',
  templates: {
    suggestion: function(hit) {

      // select matching attributes only
      hit.matchingAttributes = [];
      for (var attribute in hit._highlightResult) {
        if (attribute === 'name' || attribute == 'twitter') {
          // already handled by the template
          continue;
        }
        // all others attributes that are matching should be added in the matchingAttributes array
        // so we can display them in the dropdown menu. Non-matching attributes are skipped.
        if (hit._highlightResult[attribute].matchLevel !== 'none') {
          hit.matchingAttributes.push({ attribute: attribute, value: hit._highlightResult[attribute].value });
        }
      }

      // render the hit using Hogan.js
      return template.render(hit);

    }
  }
});

問題は、ユーザーが結果をクリックしてページにアクセスできるようにするために使用している次の行にあります。

<a href="http://yhumans.com/{{{twitter}}}">'

実際、一部のユーザーは Twitter のユーザー名に大文字を使用しているため、検索結果のプロファイルに適切にリダイレクトできません。

説明させてください: http://yhumans.com/mynameは正しい URL です。http://yhumans.com/MyNameは間違った URL です。変数 "twitter" に小文字を使用しようとしました。しかし、私はそれを適切に行う方法を見つけることができませんでした。

それを行う 1 つの方法は、twitter 変数を小文字にすることです。しかし問題は、関数が 'downcase!' であることです。jsでは動かないようです。

何か案は ？

4

1 に答える 1

1

まず、質問に直接答えることはありませんが、関連する 2 つのコメント:

  • Hogan テンプレートでは{{variable}}、テキストに HTML を含める必要がない場合と、含める必要がある場合に使用する必要があります{{{variable}}}。そのため、 を使用する必要があります{{twitter}}。
  • Algolia は実際に に分岐typeahead.js@0.10しautocomplete.jsました。それを確認する必要があります。

そうは言っても、あなたは1つの解決策を与えました.あなたが正しいと.downcase!しても、存在しません.それは実際には.toLowercase().
あなたの提案関数では、twitterそのように属性を小文字にします:

function (hit) {
  hit.twitter = hit.twitter.toLowerCase();
  // ...
}

オートコンプリート リダイレクトを処理する方法に関する 1 つの問題は、ユーザーがキーボードを使用して結果を選択できないことです。autocomplete.jsと の両方で推奨される方法typeahead.jsは、それぞれautocomplete:selectedortypeahead:selectedイベントを使用することです。

$('#user-search').typeahead(/* ... */).on('typeahead:selected', function (ew, selection, dataset) {
  // Redirect to http://yhumans.com/my-twitter-name
  window.location.href = 'http://yhumans.com/' + selection.twitter;
});

ユーザーがカーソルを合わせたり、矢印で結果を選択したときに現在の選択内容をユーザーに表示するには、.aa-hint( autocomplete.js) または.tt-hint( typeahead.js) を使用して別の背景色を設定できます。

于 2016-01-26T13:12:57.467 に答える