Форумы портала PHP.SU :: Версия для печати :: проблема при использовании нескольких полей с "живым поиском"

1. FarawaySlv - 11 Апреля, 2016 - 14:27:34 - перейти к сообщению

При использовании нескольких полей input с "живым поиском" возникла проблема при выборе значения из вариантов результатов поиска. При вводе в первое поле все ОК, при выборе значения для следующего поля значение подставляется не только в нужное поле, но и все вышестоящие и т.д. Необходимо чтобы в каждом поле сохранялся только выбранный для него вариант.
В реальном случает работа идет с базой данных откуда подбираются значения полей, в приведенном же ниже коде я просто смоделировал эту ситуацию в более простом варианте.

html страница:

CODE (html):
скопировать код в буфер обмена

 
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>Girls</title>
        <script type="text/javascript" src="js/jquery-2.2.0.min.js"></script>
        <script type="text/javascript" src="js/function.js"></script>
</head>
<body>
        <table>
                <thead>
                        <tr>
                                <td>
                                        Имя:
                                </td>
                        </tr>
                </thead>
                <tbody>
                        <tr>
                                <td>
                                        <input type="text" name="name1" class="for_name">
                                </td>
                        </tr>
                        <tr>
                                <td>
                                        <input type="text" name="name2" class="for_name">
                                </td>
                        </tr>
                        <tr>
                                <td>
                                        <input type="text" name="name3" class="for_name">
                                </td>
                        </tr>
                        <tr>
                                <td>
                                        <input type="text" name="name4" class="for_name">
                                </td>
                        </tr>
                        <tr>
                                <td>
                                        <input type="text" name="name5" class="for_name">
                                </td>
                        </tr>
                </tbody>
        </table>
        <ul class="search_result"></ul>
</body>
</html>
 

Скрипт:

CODE (javascript):
скопировать код в буфер обмена

 
var d = document;
$(d).ready(function() {
        $('input.for_name').on("keyup", function() {
        var ask = this.value; //после приема введенных в input данных записываю значение и имя тэга
        var name = this.name;
        var row = "";
//отправляю запрос на php для подбора похожих имен
         $.ajax({
                type: 'post',
                url: "test.php",
                data: {'ask' : ask},
                success: function(data) {
                        variants = JSON.parse(data);
                         //формирую результат для вывода в виде списка
                        for (var i = 0; i < variants.length; i++) {
                             row = row + "<li>" + variants[i] + "</li>";
                        }
                                //вывожу список
                        $(".search_result").html(row).fadeIn();
                }
        })
                   //при клике на вариант результатов поиска вношу его в поле input
                $(".search_result").on("click", "li", function() {
                        $(d.getElementsByName(name)[0]).val($(this).text());
                })
 
        })
})
 

И php файл:

PHP:
скопировать код в буфер обмена

 
<?PHP 
        $girls = array('Катя', 'Кристина', 'Кира', 'Таня', 'Тамара', 'Тина', 'Наташа', 'Настя', 'Надежда', 'Маргарита', 'Мария', 'Мила', 'Антонина', 'Аня', 'Александра', 'Анастасия', 'Агрипина', 'Акулина', 'Амфиса', 'Вилена', 'Виолета', 'Виктория', 'Виталина');
        
//функция транслитерации
        function translit($s) {
                  $s = (string) $s; 
                  $s = strip_tags($s);
                  $s = str_replace(array("\n", "\r"), " ", $s);
                  $s = preg_replace("/\s+/", ' ', $s);
                  $s = trim($s);
                  $s = mb_strtolower($s, 'utf-8');
                  $s = strtr($s, array("А"=>"A","Б"=>"B","В"=>"V","Г"=>"G", "Д"=>"D","Е"=>"E","Ж"=>"J","З"=>"Z","И"=>"I", "Й"=>"Y","К"=>"K","Л"=>"L","М"=>"M","Н"=>"N", "О"=>"O","П"=>"P","Р"=>"R","С"=>"S","Т"=>"T", "У"=>"U","Ф"=>"F","Х"=>"H","Ц"=>"TS","Ч"=>"CH", "Ш"=>"SH","Щ"=>"SCH","Ъ"=>"","Ы"=>"YI","Ь"=>"", "Э"=>"E","Ю"=>"YU","Я"=>"YA", 'а'=>'a','б'=>'b','в'=>'v','г'=>'g','д'=>'d','е'=>'e','ё'=>'e','ж'=>'j','з'=>'z','и'=>'i','й'=>'y','к'=>'k','л'=>'l','м'=>'m','н'=>'n','о'=>'o','п'=>'p','р'=>'r','с'=>'s','т'=>'t','у'=>'u','ф'=>'f','х'=>'h','ц'=>'c','ч'=>'ch','ш'=>'sh','щ'=>'shch','ы'=>'y','э'=>'e','ю'=>'yu','я'=>'ya','ъ'=>'','ь'=>''));
                  $s = preg_replace("/[^0-9a-z-_ ]/i", "", $s);
                  return $s;
}
 
 
        if ($_POST["ask"]) {
                $ask = translit($_POST["ask"]);
                $row = array();
                $k = 0;
                $num = strlen($ask);
                     // иду по массиву и ищу похожие имена
                for ($i = 0; $i< count($girls); $i++) {
                        $tmp_str = translit($girls[$i]);
                        if ((substr($tmp_str, 0, $num)) == $ask) {
                                $row[$k] = $girls[$i];
                                $k++;
                                }
                }
                //перевожу json в формат
                echo json_encode($row);
        }
?>
 