weixin_33691817 2012-06-06 13:42 采纳率: 0%
浏览 36

使用ajax填充2个输入

first of all let me apologise for my bad english (I'm learning english since 6 months only).

I'm doing a website in which I'm using a mysql db, for some reasons I have to use a form which require the intervention of the database, so I've checked for a script which use ajax to do an auto-complete input type text for researching in the databse in order not to display a select of more than thousands entries.

So I've this script:

on the page 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);
?> 

this script has to save all the entries of my database in a file text.

After this I have this ajax script:

<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

    }

};

})();

In the page autocomplete.php I have :

<?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 |

    ?>

The problem is that when I use the script it displays this error: Warning: sort() expects parameter 1 to be array, string given in C:\wamp\www\NEOGETCASH\GESTIONNAIRE\autocomplete.php on line 5

I don't know how to resolve the problem.

the other thing is that Using the result of the entries that has been selected by in the input because it must display the field 'code_client', I would like to display an other filed in which appears the field 'numero_dossier'.

So I have this script and I would like to fiel 2 input type text with.

for exemple if my user search for Ecf, in the first input type text will appear the code_client '1566' and in the second the n_doss '110015666223'

the informations are registered like this schema in my database

table: client Fields:

id code_client n_dosss adress zip_code contry tel fax gsm e_mail

and so on.

Thank you so much for your help in advance.

  • 写回答

2条回答 默认 最新

  • 狐狸.fox 2012-06-06 13:47
    关注

    Why don't you use jQuery AJAX? It is simple as well as all browser compatible.

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

    So, you can use the jQuery to browse for the right element and update the inner HTML using the function .html(). Hope this is helpful.

    评论

报告相同问题?

悬赏问题

  • ¥15 执行 virtuoso 命令后,界面没有,cadence 启动不起来
  • ¥50 comfyui下连接animatediff节点生成视频质量非常差的原因
  • ¥20 有关区间dp的问题求解
  • ¥15 多电路系统共用电源的串扰问题
  • ¥15 slam rangenet++配置
  • ¥15 有没有研究水声通信方面的帮我改俩matlab代码
  • ¥15 ubuntu子系统密码忘记
  • ¥15 保护模式-系统加载-段寄存器
  • ¥15 电脑桌面设定一个区域禁止鼠标操作
  • ¥15 求NPF226060磁芯的详细资料