オートコンプリートに似た言葉を提案するには

Question

私はjquery-ui-autocompleteを持つ場所の入力フィールドを持っています。

<script type="text/javascript"> 
    $(document).ready(function(){ 
     var location_input=$('input[id="location-autocomplete"]'); 
     var cityNames = [ 
      { value: 'Mallorca' }, 
      { value: 'Berlin' }, 
      { value: 'London' }, 
      // many other elements 
     ]; 
     location_input.autocomplete({ 
      source: cityNames, 
      minLength: 2 
     }); 
     }); 

    // keeps same width as box 
     jQuery.ui.autocomplete.prototype._resizeMenu = function() { 
      var ul = this.menu.element; 
      ul.outerWidth(this.element.outerWidth()); 
     } 
</script> 

ただし、同じ場所に異なる名前を付けることはできません。

たとえば、ユーザーがMallorcaを探したいとします。彼は書くことができます：マヨルカ、マヨルカ、パルマ、PMIまたはパルマ。

私の最初のアイデアは、しかし、これは非常に混乱することができlabelプロパティ

var cityNames = [ 
    { value: 'Mallorca', label: 'Palma de Mallorca' }, 
    { value: 'Mallorca', label: 'Mallorca' }, 
    { value: 'Mallorca', label: 'Majorca' }, 
    // etc 
    ]; 

を使用することでした。オートコンプリートは、彼らが同じ場所であっても、マヨルカ、パルマとマヨルカを示すだろう馬を書きます。

私は馬を入力するとき、ユーザは一つだけ提案を取得することにしたいと思います。同様に、ユーザーがマジ、またはpalと入力しても、マヨルカの候補語は1つだけにする必要があります。

は理想的には、追加のプロパティは完璧だっただろう検索する入力キーワードとして働いinputと呼ばれます。その後、それぞれについてvalueとinputのプロパティを持つ配列を持つことは、このトリックを実行したことになります。残念ながら、私はドキュメントでそのようなものを見つけることはできませんでした。

あなたが見ることができるように、私はソースタイプarrayとして使用しています。私が読んだものについては、おそらくfunctionタイプは私にこのようなことをさせてくれるだろうが、私はjsに慣れていないし、それについて明確な例も見つけられなかったので、

簡単な方法でどのように達成できますか？

Answer 1

あなたはほとんどそこにいます。 response関数（see in API）を使用して、結果から代替スペルを削除することができます。また、最善のスペル（この場合は「マヨルカ」）を最後に置きます。これをチェックして、コメントがロジックを取得するのに十分であることを願っています。 "Ma"または "Maj"と入力してを選択してください。を選択するだけです。いくつかの追加の研究と多くの試みが、私はそれを行うための方法を見つけた後、両方のケースでは、「マジョルカ」

$(function() { 
 
    var availableTags = [  
 
    { value: 'Mallorca', label: 'Palma de Mallorca' }, 
 
    { value: 'Mallorca', label: 'Majorca' }, 
 
    { value: 'Mallorca', label: 'Mallorca' }, 
 
    { value: 'Madrid', label: 'Madrid' } 
 
    ]; 
 
    $("#tags").autocomplete({ 
 
     source: availableTags,  
 
     response: function(event, ui) { 
 
     var added = [];//Keep here the unique labels that are already in the list 
 
     for(var i=ui.content.length-1;i>=0;i--){//Start a loop, itterate all items backwards 
 
      var cur = ui.content[i].value;//Value of the item 
 
      if($.inArray(cur,added)==-1){//If not already loaded 
 
      added.push(cur);//Put the new item in the list 
 
      }else{    
 
      ui.content.splice(i,1);//If already loaded remove it from the results 
 
      } 
 
     }   
 
     } 
 
    }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 
<div class="ui-widget"> 
 
    <label for="tags">Tags: </label> 
 
    <input id="tags"> 
 
</div>

Answer 2

が表示されます。これはDjangoに特化したなので、その他の一般的な提案は当然歓迎されます。

溶液をいくつかの変更を加えているが、this tutorialに基づいています。

---

まず、テンプレートで輸入jQueryとjQueryUI：

その後

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css" type="text/css" media="all" /> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" type="text/javascript"></script> 

、テンプレート自体では、あなたが入力タグにIDを割り当てる必要があります。このidはjqueryがオートコンプリートを実行するフォームを識別する方法です。次のように

<div class="ui-widget"> 
    <label for="cities">City: </label> 
    <input id="autocomplete-cities"> 
</div> 

javascriptのコードは次のとおりです。

<script type="text/javascript"> 
    $(document).ready(function(){ 
     var location_input=$('input[id="autocomplete-city"]'); 
     location_input.autocomplete({ 
      source: "/api/get_city_names/", 
      minLength: 2 
     }); 
     }); 

    // keeps same width as box 
     jQuery.ui.autocomplete.prototype._resizeMenu = function() { 
      var ul = this.menu.element; 
      ul.outerWidth(this.element.outerWidth()); 
     } 
</script> 

そしてurls.pyファイルはそれに応じて変更する必要があります

# urls.py 

import yourapp.views 

urlpatterns = [ 
    ..., 
    url(r'^api/get_city_names/', yourapp.views.get_city_names), 
    ..., 
] 

そして最後にDjangoのビューを作成します。関数の名前は、urls.pyと書かれたものと同じでなければならず、javascriptのsourceで書かれたものと同じでなければなりません。

#views.py 

import json 

def get_city_names(request): 

    #what was in the question an array is now a python list of dicts. 
    #it can also be in some other file and just imported. 
    all_city_names = [ 
    { good_name: 'Mallorca', input_name: 'Palma de Mallorca' }, 
    { good_name: 'Mallorca', input_name: 'Mallorca' }, 
    { good_name: 'Mallorca', input_name: 'Majorca' }, 
    # etc 
    ] 

    if request.is_ajax(): 
     q = request.GET.get('term', '') 

     city_names = [c['good_name'] for c in all_city_names if q in c["input_name"]] 
     city_names = set(city_names) #removing duplicates 

     results = [] 
     for cn in city_names: 
      cn_json = {'value': cn} 
      results.append(cn_json) 
     data = json.dumps(results) 
    else: 
     data = 'fail' 
    mimetype = 'application/json' 
    return HttpResponse(data, mimetype) 

オートコンプリートが動作するはずです。