オートコンプリートを使用して入力フィールドを入力する

jqueryオートコンプリートを使用しようとしています。私はsearch.phpファイルを使用して、私はI型と提案が来て、私はどんな提案をクリックしたときに尊敬結果は、それぞれの入力フィールドに行く必要があることを望む何オートコンプリートを使用して入力フィールドを入力する

{ 
    "id" : 1, 
    "name" : "ColdFusion", 
    "type" : "Tag" 
}, 
{ 
    "id" : 2, 
    "name" : "C#", 
    "type" : "Programming" 
},

としてデータを取得しています。たとえば、Coldと入力してColdFusionをクリックすると、IDはinput id="id"になり、タイプはinput id="name"になります。私はオートコンプリートで初めてのことなので、どのjqueryイベントを使うべきか考えられませんでした。私はjqueryサイトから簡単な実例を投稿してください。

$("#autocomplete").autocomplete({ 
 
    source: [ "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby" ] 
 
});

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>autocomplete demo</title> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
    <script src="//code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
</head> 
 
<body> 
 
    
 
<label for="autocomplete">Select a programming language: </label> 
 
<input id="autocomplete"> 
 
    
 
ID <input id="id"/> 
 
NAME <input id="name"/> 
 
TYPE <input id="type"/> 
 
    
 
</body> 
 
</html>

出典

2017-07-14 Alen

あなたはsearch.php

$("#txtAutocomplete").autocomplete({ 
     source: function (request, response) { 
      $.ajax({ 
       url: search.php,//url 
       data: { prefixText: request.term }, 
       dataType: "json", 
       type: "POST", 
       success: function (data) { 
        response($.map(data, function (item) { 
         return { 
         label: item.value, 
         value: item.value, 
         id: item.id, 
         type: item.type 
         } 
        })) 
       }, 
       error: function (xhr, status, err) { 
        alert("Error") 
       } 
      }); 
     }, 
     select: function (even, ui) { 
      $("#id").val(ui.item.id); 
      $("#name").val(ui.item.value); 
      $("#type").val(ui.item.type); 
     } 
    });

出典

2017-07-14 09:14:34

あなたはオートコンプリートの提案から値を選択したときに発火select方法を探していますが

$("#autocomplete").autocomplete({ 
    source: function (request, response) { 
     var objArray = [{ 
       "id" : 1, 
       "name" : "ColdFusion", 
       "type" : "Tag" 
      }, 
      { 
       "id" : 2, 
       "name" : "C#", 
       "type" : "Programming" 
      }]; 

      response(objArray); 
      return; 
     }, 
     select: function (e, ui) { 
      console.log(ui.item);//this will give you the selected object 
      $('#id').val(ui.item.id); 
      $('#name').val(ui.item.name); 
      $('#type').val(ui.item.type); 
    }

これはオートコンプリートにオブジェクトを割り当てるべきであるかであります値を選択すると選択メソッドが起動し、選択したオブジェクトにアクセスして必要な操作を実行できます。

出典

2017-07-14 04:55:29 Saksham

$("#autocomplete").autocomplete({ 
 
    source: function (request, response) { 
 
     var data = [ 
 
    { 
 
     id:'1', 
 
     value: 'c++', 
 
     type:'lang'        
 
    }, 
 
    { 
 
     id:'2', 
 
     value: 'java', 
 
     type:'lang'        
 
    }, 
 
\t { 
 
     id:'3', 
 
     value: 'coldfusion', 
 
     type:'lang'        
 
    }, 
 
\t { 
 
     id:'4', 
 
     value: 'php', 
 
     type:'lang'        
 
    } 
 
    ]; 
 
     response($.map(data, function (item) { 
 
     return { 
 
\t \t \t \t \t \t \t label: item.value, 
 
\t \t \t \t \t \t \t value: item.value, 
 
\t \t \t \t \t \t \t id: item.id, 
 
\t \t \t \t \t \t \t type: item.type 
 
\t \t \t \t \t \t } 
 
     })) 
 
    }, 
 
    select: function (even, ui) { 
 
     // Here you can set to inputs. 
 
     $("#id").val(ui.item.id); 
 
     $("#name").val(ui.item.value); 
 
     $("#type").val(ui.item.type); 
 
    } 
 
});

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>autocomplete demo</title> 
 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
    <script src="//code.jquery.com/jquery-1.12.4.js"></script> 
 
    <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
 
</head> 
 
<body> 
 
    
 
<label for="autocomplete">Select a programming language: </label> 
 
<input id="autocomplete"> 
 
    
 
ID <input id="id"/> 
 
NAME <input id="name"/> 
 
TYPE <input id="type"/> 
 
    
 
</body> 
 
</html>

出典

2017-07-14 05:25:55

ありがとうリンクするURLを変更することができます。簡単な質問ですが、この静的なものを 'search.php'で置き換える必要がある場合はどうすればいいでしょうか、' map'をどのように使うべきでしょうか？ – Alen

オートコンプリートのソースでajaxコールを行い、ajaxで成功すると成功イベントの 'response'コードが追加されます。そのまま別のものを保管してください。 –

サンプルを投稿できますか？ – Alen

オートコンプリートを使用して入力フィールドを入力する

答えて

関連する問題