使用ajax填充2個輸入

Question

首先讓我爲我的壞英語道歉（我從6個月以來只學習英語）。

我正在做一個網站，我使用的是一個MySQL數據庫，由於某些原因，我必須使用一個需要數據庫干預的表單，所以我已經檢查了一個使用Ajax的腳本來完成用於研究數據庫的自動完成輸入類型文本，以便不顯示超過數千個條目的選擇。

所以我此腳本：

頁面風格dossier.php

<?php $monfichier = fopen('liste_clients.txt', 'w'); 

// 2 : on lit la première ligne du fichier 
$ligne = fgets($monfichier); 
ftruncate($monfichier,0); 
$sql2 = "SELECT code_client, nom_commercial FROM client"; 
$re2 = mysql_query($sql2) or die(__LINE__.mysql_error().$sql2); 
while($d2 = mysql_fetch_assoc($re2)) { 
fputs($monfichier, $d2['nom_commercial'].' '.$d2['code_client'].'|'); 
fputs($monfichier, $d2['code_client'].' '.$d2['nom_commercial'].'|'); 
     } 
// 3 : quand on a fini de l'utiliser, on ferme le fichier 
fclose($monfichier); 
?> 

這個劇本有我的數據庫中的所有條目保存在一個文件中的文本。

這之後，我有這樣的AJAX腳本：

<div id="results"></div> 
<script language="JavaScript"> 
(function() { 
var searchElement = document.getElementById('search'), 
results = document.getElementById('results'), 
selectedResult = -1, // Permet de savoir quel résultat est sélectionné : -1 signifie «    aucune sélection » 
previousRequest, // On stocke notre précédente requête dans cette variable 
previousValue = searchElement.value; // On fait de même avec la précédente valeur 



function getResults(keywords) { // Effectue une requête et récupère les résultats 

var xhr = new XMLHttpRequest(); 
xhr.open('GET', 'autocomplete.php?s='+ encodeURIComponent(keywords)); 

xhr.onreadystatechange = function() { 
if (xhr.readyState == 4 && xhr.status == 200) { 

displayResults(xhr.responseText); 

} 
}; 

xhr.send(null); 

return xhr; 

} 

function displayResults(response) { // Affiche les résultats d'une requête 

results.style.display = response.length ? 'block' : 'none'; // On cache le conteneur si on n'a pas de résultats 

if (response.length) { // On ne modifie les résultats que si on en a obtenu 

response = response.split('|'); 
var responseLen = response.length; 

results.innerHTML = ''; // On vide les résultats 

for (var i = 0, div ; i < responseLen ; i++) { 

div = results.appendChild(document.createElement('div')); 
div.innerHTML = response[i]; 

div.onclick = function() { 
chooseResult(this); 
}; 

} 

} 

} 

function chooseResult(result) { // Choisit un des résultats d'une requête et gère tout ce qui y est attaché 

searchElement.value = previousValue = result.innerHTML; // On change le contenu du champ de recherche et on enregistre en tant que précédente valeur 
results.style.display = 'none'; // On cache les résultats 
result.className = ''; // On supprime l'effet de focus 
selectedResult = -1; // On remet la sélection à zéro 
searchElement.focus(); // Si le résultat a été choisi par le biais d'un clic, alors le focus est perdu, donc on le réattribue 

} 



searchElement.onkeyup = function(e) { 

e = e || window.event; // On n'oublie pas la compatibilité pour IE 

var divs = results.getElementsByTagName('div'); 

if (e.keyCode == 38 && selectedResult > -1) { // Si la touche pressée est la flèche « haut » 

divs[selectedResult--].className = ''; 

if (selectedResult > -1) { // Cette condition évite une modification de childNodes[-1], qui n'existe pas, bien entendu 
divs[selectedResult].className = 'result_focus'; 
} 

} 

else if (e.keyCode == 40 && selectedResult < divs.length - 1) { // Si la touche pressée est la flèche « bas » 

     results.style.display = 'block'; // On affiche les résultats 

     if (selectedResult > -1) { // Cette condition évite une modification de childNodes[-1], qui n'existe pas, bien entendu 
      divs[selectedResult].className = ''; 
     } 

     divs[++selectedResult].className = 'result_focus'; 

    } 

    else if (e.keyCode == 13 && selectedResult > -1) { // Si la touche pressée est « Entrée » 

     chooseResult(divs[selectedResult]); 

    } 

    else if (searchElement.value != previousValue) { // Si le contenu du champ de recherche a changé 

     previousValue = searchElement.value; 

     if (previousRequest && previousRequest.readyState < 4) { 
      previousRequest.abort(); // Si on a toujours une requête en cours, on l'arrête 
     } 

     previousRequest = getResults(previousValue); // On stocke la nouvelle requête 

     selectedResult = -1; // On remet la sélection à zéro à chaque caractère écrit 

    } 

}; 

}）（）;

在頁面autocomplete.php我：

<?php 
$data = ((file_get_contents('liste_clients.txt'))); // Récupération de la liste complète des villes 
    $dataLen = count($data); 

    sort($data); // On trie les villes dans l'ordre alphabétique 

    $results = array(); // Le tableau où seront stockés les résultats de la recherche 

    // La boucle ci-dessous parcourt tout le tableau $data, jusqu'à un maximum de 10 résultats 

     for ($i = 0 ; $i < $dataLen && count($results) < 10 ; $i++) { 
      if (stripos($data[$i], $_GET['s']) === 0) { // Si la valeur commence par les mêmes caractères que la recherche 

       array_push($results, $data[$i]); // On ajoute alors le résultat à la liste à retourner 

      } 
     } 

    echo implode('|', $results); // Et on affiche les résultats séparés par une barre verticale | 

    ?> 

的問題是，當我使用該腳本會顯示此錯誤： 警告：排序（）預計參數1是數組，字符串中給定在C：\ wamp \ www \ NEOGETCASH \ GESTIONNAIRE \ autocomplete.php在線5

我不知道如何解決問題。

另一件事是，使用輸入中已經選擇的條目的結果，因爲它必須顯示字段'code_client'，我想顯示其他字段中出現'numero_dossier'字段。

所以我有這個腳本，我想用2輸入類型文本。

爲爲例，如果我的用戶搜索ECF，在第一個輸入類型文本將出現在code_client「1566」，並在第二個n_doss「110015666223」

的信息被登記這樣的模式在我的數據庫

表：客戶 領域：

ID code_client n_dosss ADRESS ZIP_CODE contry電話傳真GSM的e_mail

等。

非常感謝你提前給予的幫助。

Answer 1

錯誤你看到

Warning: sort() expects parameter 1 to be array, string given in C:\wamp\www\NEOGETCASH\GESTIONNAIRE\autocomplete.php on line 5 

是因爲，file_get_contents()返回string
對於您使用的排序方法，你需要首先將字符串轉換爲數組。如果有一個delimiter分隔文件中的不同條目，這將是可能的。
你可以做：

$dataStr = file_get_contents('liste_clients.txt'); 
$data = explode($delimiter,$dataStr); 
sort($data); 
..... //continue with your code :) 

希望這有助於

Answer 2

爲什麼不使用jQuery AJAX？它很簡單，以及所有瀏覽器兼容。

$.ajax({ 
    url: 'ajax/test.html', 
    success: function(data) { 
     $('.result').html(data); 
     alert('Load was performed.'); 
    } 
}); 

所以，你可以使用jQuery來瀏覽正確的元素和更新使用功能.html()內部HTML。希望這是有幫助的。