使用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。希望这是有帮助的。