Twitter引導鍵入返回多個值並填充編輯框

我是引導程序中的新手，我需要一些幫助，我想創建一個typeahead下拉列表，當用戶搜索聯繫人時從我的mysql數據庫返回3個值名「聯繫人姓名」 TEXTBOX和感謝填補3編輯框與 - 接觸名稱的信息 - 電話號碼 -email地址了很多提前爲你的努力Twitter引導鍵入返回多個值並填充編輯框

這是代碼，我嘗試它返回一個值，我需要修改，以返回所有這些樹值現在，當我嘗試搜索聯繫人的名稱，它將返回正確，沒有問題要問，但我不知道如何修改代碼以使3值就像我上面提到

enter code here 

**php page: Customer.php** 
------------------------------------------- 
<?php 
$host = "localhost"; 
$uname = "root"; 
$pass = ""; 
$database = "db34218"; 

$connection=mysql_connect($host,$uname,$pass) or die("connection in not ready <br>"); 
$result=mysql_select_db($database) or die("database cannot be selected <br>"); 

if (isset($_REQUEST['query'])) { 

$query = $_REQUEST['query']; 

$sql = mysql_query ("SELECT ContactName, Telephone, Email FROM customer WHERE ContactName LIKE '%{$query}%'"); 
$array = array(); 

while ($row = mysql_fetch_assoc($sql)) { 
    $array[] = $row['ContactName']; 
} 

echo json_encode ($array); //Return the JSON Array 
} 
?> 




**html and java page and some php: Customersearch.php** 
------------------------------------------------ 
<body> 
. 
. 
. 
     <div class="row-fluid"> 
      <div class="span4"> 
      <label>ContactName&nbsp;</label> 
      <input type="text" name="ContactName" value="<?php echo  $row_Recordset_QuoteCustomer['ContactName']?>" data-provide="typeahead" class="typeahead input-xlarge" autocomplete="off"> 
      </div> 
      <div class="span2"> 
      <label>Telephone&nbsp;</label> 
      <input type="text" name="Telephone" value="<?php echo  htmlentities($row_Recordset_QuoteCustomer['Telephone'], ENT_COMPAT, 'utf-8'); ?>" class="span12"> 
      </div> 
      <div class="span2"> 
      <label>Email &nbsp;</label> 
      <input type="text" name="Email " value="<?php echo  htmlentities(row_Recordset_QuoteCustomer['Email '], ENT_COMPAT, 'utf-8'); ?>" class="span12"> 
      </div> 
......... 
. 
. 
. 
. 
. 
. 

<script src="../js/jquery.js"></script> 
<script src="../js/bootstrap-transition.js"></script> 
<script src="../js/bootstrap-alert.js"></script> 
<script src="../js/bootstrap-modal.js"></script> 
<script src="../js/bootstrap-dropdown.js"></script> 
<script src="../js/bootstrap-scrollspy.js"></script> 
<script src="../js/bootstrap-tab.js"></script> 
<script src="../js/bootstrap-tooltip.js"></script> 
<script src="../js/bootstrap-popover.js"></script> 
<script src="../js/bootstrap-button.js"></script> 
<script src="../js/bootstrap-typeahead.js"></script> 
<script src="../js/SpecWorkPages/getItemsList.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() 
{ 
$('input.typeahead').typeahead({ 
    source: function (query, process) 
    { 
     $.ajax(
     { 
      url: 'Customer.php', 
      type: 'POST', 
      dataType: 'JSON', 
      data: 'query=' + query, 
      success: function(data) 
      { 
       console.log(data); 
       process(data); 
      } 
     }); 
    } 
}); 
}) 
</script> 
</body> 
</html> 
<?php 
mysql_free_result($RecordsetQuote); 
mysql_free_result($Recordset_QuoteStatus); 
mysql_free_result($Recordset_QuoteCustomer); 
?>

來源

2013-08-28 elie jammal

Wi如果沒有任何代碼，任何人都很難提供幫助。如果你還沒有，我建議在這裏看一下https://gist.github.com/Yavari/1891669開個好頭。您也可以通過快速搜索查看有關該主題的其他SO帖子：http://stackoverflow.com/search?q=bootstrap+typeahead – Brian

好的，我添加了我的代碼，可以幫助我修改代碼，謝謝 –

如果我正確認識你，你得到的結果回來，但無法填充輸入字段。雖然我不使用Twitter Bootstrap typeahead，但我使用jQuery的自動完成功能做了非常類似的事情。下面的代碼是未經測試的，當然你需要自己修改它，但希望能得到一些幫助。

看到這個工作jsFiddle demo的東西類似。

PHP

$array = array(); 
while ($row = mysql_fetch_assoc($sql)) { 
    array_push($array,array('ContactName'=>$row['ContactName'],'Telephone'=>$row['Telephone'],'Email'=>$row['Email'])); 
} 
echo json_encode($array);

您可以檢查哪些內容通過手動輸入URL返回（例如：yoursite/Customer.php查詢= SomeContactName）。你應該會看到類似這樣的東西：

[{"ContactName":"Some Contact","Telephone":"5555555555","Email":"[email protected]"}, 
{"ContactName":"Some Other Contact","Telephone":"5555555555","Email":"[email protected]"}]

HTML/JavaScript的

<script> 
    $('input.typeahead').typeahead({ 
     source: function (query, process) { 
      $.ajax({ 
       url: 'Customer.php', 
       type: 'POST', 
       dataType: 'JSON', 
       // data: 'query=' + query, 
       data: 'query=' + $('#contactName').val(), 
       success: function(data) 
       { 
        var results = data.map(function(item) { 
         var someItem = { contactname: item.ContactName, telephone: item.Telephone, email: item.Email }; 
         return JSON.stringify(someItem.contactname); 
        }); 
        return process(results); 
       } 
      }); 
     }, 
     minLength: 1, 
     updater: function(item) { 
      // This may need some tweaks as it has not been tested 
      var obj = JSON.parse(item); 
      return item; 
     } 
    }); 
</script>

以下是你可能想看看How to return the response from an AJAX call?一對夫婦的其他職位和Bootstrap typeahead ajax result format - Example

來源

2013-08-29 18:41:51 Brian

謝謝很多你的幫助我真的很感激我會盡力修改我的頁面，謝謝你 –

不客氣！快樂的編碼！ – Brian

抱歉bug再次您的代碼大腦與我的代碼我試圖將您的代碼添加到我的頁面，所以它沒有工作事件聯繫人的編輯框時，當我輸入名稱停止搜索它我不知道該怎麼辦我需要你的幫助再次，聯繫人名稱框它應該是像jQuery中的自動完成當我開始鍵入聯繫人名稱它將返回在我的MySQL表中找到的所有名稱我的代碼上面的工作完美的情況下，但我需要得到的電話和電子郵件以填補其他2個編輯框請幫助。 –

Twitter引導鍵入返回多個值並填充編輯框

回答

相關問題