使用ajax填充2个输入

时间:2012-06-06 13:42:53

标签: php mysql ajax field

首先让我为我糟糕的英语道歉(我从6个月开始学习英语)。

我正在做一个我正在使用mysql数据库的网站,由于某些原因我必须使用需要数据库干预的表单,所以我检查了一个使用ajax来执行的脚本自动完成输入类型文本,用于在数据库中进行研究,以便不显示超过数千个条目的选择。

所以我有这个脚本:

页面上的nouveau 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 |

    ?>

问题是,当我使用脚本时,它会显示以下错误: 警告:sort()期望参数1为数组,字符串在第5行的C:\ wamp \ www \ NEOGETCASH \ GESTIONNAIRE \ autocomplete.php中给出

我不知道如何解决这个问题。

另一件事是使用输入中选择的条目的结果,因为它必须显示字段'code_client',我想显示另一个字段,其中显示字段'numero_dossier'。 / p>

所以我有这个脚本,我想用2输入类型文本。

例如,如果我的用户搜索Ecf,则在第一个输入类型文本中将出现code_client'1566',在第二个中出现n_doss'110015666223'

信息在我的数据库中像这个模式一样注册

表:客户 字段:

id code_client n_dosss adress zip_code contry tel fax gsm e_mail

等等。

非常感谢您的帮助。

2 个答案:

答案 0 :(得分:1)

为什么不使用jQuery AJAX?它很简单,并且与所有浏览器兼容。

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

因此,您可以使用jQuery浏览正确的元素并使用函数.html()更新内部HTML。希望这有用。

答案 1 :(得分:0)

您看到的错误

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
要使用sort方法,首先需要将字符串转换为数组。如果有delimiter分隔文件中的不同条目,则可以执行此操作 你可以做:

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

希望这有帮助