2016-11-24 2 views
0

よろしくお願いします... 私はtwitterのtypeahead autocomplete complete boxを持っています。ページまたはIFRAMEをリロードするのではなく、オートコンプリートの選択に JSとPHPでオートコンプリートされたページの一部をリロードしますか?

 <div id="sites"> 
      <span></h4>Site Review</h4><input class="typeahead form-control" type="text" placeholder="Spot Check for..."></span> 
     </div> 

は、私は、MySQLサーバに保存されている各「サイト」への独自のリスト要素が含まれているのdivを更新したいと思います。これらは、今、私はインラインフレームを使用しなくてもget_site_attributes.phpの内容とそのdiv要素をリロードんかget_site_attributes.php

$('.typeahead') 
    .typeahead(/* pass in your datasets and initialize the typeahead */) 
    .on('typeahead:selected', onAutocompleted) 
    .on('typeahead:autocompleted', onSelected); 


function onAutocompleted($e, datum) { 
... 
} 

function onSelected($e, datum) { 
... 
} 

によってフェッチされるのですか?

事前にお問い合わせ

+0

JavaScriptといくつかのAJAXあなたは、あなたがこれを持っているとしましょう、あなたのDOMのコンテンツ

をリフレッシュするために必要な場所

は方法ajaxCall呼び出します。 ajaxを使用してデータベースから情報を取得し、javascriptまたはjQueryを使用してdivの内容を更新します – Icewine

答えて

2

コメントによると、あなたはajaxを使用する必要があります。あなたのJSで次に

<h1 class='site_title'></h1> 

var ajaxCall = function(){ 
    $.ajax({ 
    url : 'get_site_attributes.php', #or relative path 
    type : 'GET', 
    dataType:'', #whatever get_site_attributes.php is returning: html/json/... 
    success : function(data) {    
     updateDatas(data); 
    }, 
    error : function(request, error) { 
     console.log(request, error); 
    } 
}); 
} 

var updateDatas(data) = function(){ 
    # replace whatever you want in the DOM with your datas 
    # for example: 
    # $('.site_title').empty(); 
    # $('.site_title').append(data.site_title); 
} 
関連する問題