Twitter bootstrap typeahead 여러 값을 반환하고 편집 상자를 채우십시오.

저는 부트 스트랩에 새로운 기능이있어서 연락처를 검색 할 때 내 mysql 데이터베이스에서 3 가지 값을 반환하는 미리보기 드롭 다운을 만들고 싶습니다. "연락처 이름"텍스트 상자에 이름을 지정하고 모든 노력을 사전에 감사에게 접촉 식 이름의 정보 - 전화 번호 -email 주소로 많은 3 편집 상자를 채워Twitter bootstrap typeahead 여러 값을 반환하고 편집 상자를 채우십시오.

이 코드는 그 전 그것을 하나의 값을 반환하려고 모든 tree 값을 반환하기 위해 수정해야합니다 이제 연락처 이름을 검색하려고하면 함께 반환됩니다. 제대로없는 질문은 물어하지만 난 내가 제대로 이해하고있어 경우, 당신은을 채울 다시 있지만 수없는 결과를 얻고 난

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를 보시기 바랍니다. 당신은 또한 빠른 검색과 함께 주제에 대한 다른 게시물을 확인할 수 있습니다 : http://stackoverflow.com/search?q=bootstrap+typeahead – Brian

괜찮아요 내가 내 코드를 추가 할 수있는 수정 자 내 코드 덕분에 좀 도와주세요 –

위의 언급처럼 3 가치를 제공하기 위해 코드를 수정하는 방법을 모른다 입력 필드 Twitter Bootstrap을 사용하지는 않지만 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/자바 스크립트 여기

당신이 How to return the response from an AJAX call?에서 살펴 봐야 할 수있는 몇 가지 다른 게시물입니다
:이 비슷한을 볼 수 및 Bootstrap typeahead ajax result format - Example

출처

2013-08-29 18:41:51 Brian

감사합니다 많은 도움을 주셔서 감사합니다. 내 페이지 수정자를 많이 사용해 주셔서 감사합니다. –

안녕하세요. 해피 코딩! – Brian

다시 버그가 생긴다 죄송합니다. 내 코드로 뇌를 내 페이지에 코드를 추가하려고 했으므로 이벤트가 작동하지 않았습니다. contactname에 대한 편집 상자 이름을 입력하면 검색이 중지됩니다. 무엇을해야할지 모르겠습니다. 귀하의 도움을 다시, contactname 상자 jquery autocomplet 같은 연락처 이름을 입력 할 때 모든 이름을 반환합니다 내 mysql 테이블에 내 코드가 그 시나리오에 대한 완벽한 반환해야하지만 전화와 전자 메일을 얻이 필요가 있어야합니다. 다른 2 편집 상자를 채우기 위해 도와주세요. –

Twitter bootstrap typeahead 여러 값을 반환하고 편집 상자를 채우십시오.

답변

관련 문제