データが見つからない場合にJqueryのオートコンプリートが表示されます。

Question

jqueryで検索ドロップダウンを追加しました。そのうまくいく検索。入力データが配列データと一致しない場合は追加し、入力フィールドの下にテキストメッセージ通知を表示し、テキストが配列と一致するとメッセージ通知を自動非表示にします。どうやってやるの？

<input type='text' title='Tags' id='tags' /> 

$(document).ready(function() { 

    var aTags = ["ask","always", "all", "alright", "one", "foo", "blackberry", "tweet","force9", "westerners", "sport"]; 

    $("#tags").autocomplete({ 
     source: aTags 
    }); 

}); 

Answer 1

あなたはオートコンプリートのresponseイベントを使用することができ、これを達成するために。マッチの配列を含むオブジェクトを受け取ります。この配列が空の場合、あなたは何の一致がなかった知っている、あなたは、あなたのメッセージを表示することができます。

var aTags = ["ask", "always", "all", "alright", "one", "foo", "blackberry", "tweet", "force9", "westerners", "sport"]; 
 
var $noMatches = $('.no-matches'); 
 

 
$("#tags").autocomplete({ 
 
    source: aTags, 
 
    response: function(e, result) { 
 
    $noMatches.hide(); 
 
    if (!result.content.length) 
 
     $noMatches.show(); 
 
    } 
 
});

span { 
 
    display: none; 
 
    color: #C00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script> 
 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" /> 
 
<input type='text' title='Tags' id='tags' /> 
 
<span class="no-matches">No matches!</span>

SOスニペットエディタが現在壊れていることに注意してくださいは、ので、ここでフィドルで作業例です： https://jsfiddle.net/vfzrgnon/

Answer 2

このリンクをチェックしてくださいhttps://jsfiddle.net/Sakib001それは

<div class="ui-widget"><input type='text' title='Tags' id='tags' /></div>