検索ボックスに先行提案を改善する方法

Question

私はフロントエンド開発の初心者です。私は古いレガシーの.netアプリケーションの1つに検索ボックスを実装しました。それは正常に動作していますが、改善する必要があります。 私の検索結果は基本的に「a href」タグを返します。ユーザーはそれを直接クリックして作業を行うことができます。

問題：

• ユーザーが結果リストをスクロールするたびに、彼らは、リスト内の実際の'のhref'タグを参照してください。
• 検索結果のテキスト部分のみがクリック可能ですが、ハイライトされた領域全体は表示されません。
• 何らかの形で'Enter'が機能しません。例えばのために

：

私が入力した場合「テストレポートを」それは私が正しいの提案を示しますが、スクロールダウンしながら、私は、タグを見ることができます。

私を探しています何：その中の結果だけでテキスト値を下にスクロールしながら、私は「HREF」タグを表示したくない

• 。それと同時に、それらのタグをクリックするためにそれらを保持する必要があります。例えばのために

：私は、テキストボックスに「テストレポートPSC」を見たい上記の場合が、同時に「テストレポートPSCは、」クリック可能でなければなりません。

• 私が入力すると、マウスクリックと同じように動作するはずです。
• また、領域全体をクリック可能にし、結果のテキスト部分だけでなく、

ここで正しい方向を指示してください、ありがとうございます。

コード： HTMLファイル

<div class="app-header-icons pull-right"> 
    <div class="app-header-icon app-search-icon"> 
     <div class="app-header-search-container"> 
      <label for="search" class="sr-only">Search</label> 
      <input class="typeahead form-control" id="search" type="search" autocomplete="off" placeholder="Start Searching..."/> 
     </div> 
     <i class="tem tem-search"></i> 
    </div> 
</div> 

JSファイル

$(document).ready(function() {  

    var substringMatcher = function (reportNames) { 
     return function findMatches(inputString, callbackFunc) { 
      var matches = []; 
      var substrRegex = new RegExp(inputString, "i"); 
      $.each(reportNames, function (i, reportName) { 
       if (substrRegex.test(reportName)) { 
        matches.push({ value: reportName }); 
       } 
      }); 
      callbackFunc(matches); 
     }; 
    }; 

    //reportNames is an array 
    // reportName[0] = <a href="blah" title="blah"> Actual Value </a> 
    var reportNames = getReportSearchLists(); 

    $("#search").typeahead({ 
     hint: true, 
     highlight: true, 
     minLength: 3, 
     order: "asc" 
    }, 
    { 
     name: "reportNames", 
     displayKey: "value", 
     source: substringMatcher(reportNames) 
    }).bind('typeahead:selected', function (obj, datum) { 
     $('.typeahead').typeahead('val', ''); 
    });}); 

Answer 1

正確にあなたがそれを与える値が表示されます先行入力。この場合、値は<a href="blah" title="blah"> Actual Value </a>であり、それはあなたが提案リストに表示されるものとまったく同じです。

あなたがすべての行動を取ることができるかどうかはわかりませんが、正しい方向を指しているはずです。

修正getReportSearchLists()オブジェクトの代わりのような文字列を返すために：オブジェクトを返すために

[ 
    { "title":"My Report","url":"/my/url/to/report" }, 
    { "title":"Other Report","url":"/my/url/to/report" }, 
    { "title":"Something Report","url":"/my/url/to/report" } 
] 

更新substringMatcherを：

var substringMatcher = function (reportNames) { 
    return function findMatches(inputString, callbackFunc) { 
     var matches = []; 
     var substrRegex = new RegExp(inputString, "i"); 
     $.each(reportNames, function (i, obj) { 
      if (substrRegex.test(obj.title)) { 
       matches.push(obj); 
      } 
     }); 
     callbackFunc(matches); 
    }; 
}; 

は提案を表示するには、テンプレートを使用します。

$('.typeahead').typeahead({ 
    highlight: true 
}, { 
    name: 'reports', 
    display: 'title', 
    source: substringMatcher(reportNames), 
    templates: { 
    empty: [ 
     '<div><strong>No match found</strong></div>' 
    ].join('\n'), 
    suggestion: '<div class="card"><a href="' + obj.url + '"><strong>' + obj.title + '</strong></a></div>') 
    } 
});