автозаполнение с клонированными полями - PullRequest
Новая
       24

автозаполнение с клонированными полями

0 голосов
/ 08 января 2012

Я уже искал ответ, и есть несколько для этого типа вопроса, но я не могу приступить к работе. То, что я пытаюсь настроить, вероятно, лучше всего объяснить, если вы воспользуетесь приведенным ниже кодом и попробуете сами, но я постараюсь объяснить сам.

У меня есть несколько полей ввода, которые клонируются после ввода данных в них. Сейчас я пытаюсь интегрировать скрипт автозаполнения с ним. Так что все, что нужно сделать, это ввести имя человека, выбрать его из всплывающего окна, и оно поместит данные в ячейки.

Проблема в том, что он не будет вводить данные ни для чего, кроме начальной строки, потому что клонер меняет идентификатор, увеличивая номер идентификатора во всем, что клонируется. Может кто-нибудь указать мне в правильном направлении, как увеличить автозаполнение? Или как перезапустить для каждого клона?

Спасибо всем, и вот файлы, необходимые для репликации проблемы.

SQL 

-- Table structure for table `employees`
--

CREATE TABLE IF NOT EXISTS `employees` (
`id` int(12) NOT NULL AUTO_INCREMENT,
`fname` varchar(50) NOT NULL,
`lname` varchar(50) NOT NULL,
`wage` int(12) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=3 ;

--
-- Dumping data for table `employees`  
--

INSERT INTO `employees` (`id`, `fname`, `lname`, `wage`) VALUES
(1, 'John', 'Doe', 25),
(2, 'Bob', 'Smith', 30);

test.php 

<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>

<script>
                //cloning script
$("#employee input").live("keyup", function(){
var id = this.id.match(/\d+/);
});

// The second requirement:
var uniqueIds = $("#employee tr").length;
$("#employee input[id^='employee_fname']").live("change", function(){
var $thisRow = $(this).closest("tr"),
    $clone = $thisRow.clone(true),             // Clone row
    $inputs = $clone.find("input").val("");// Reset values, return all inputs
uniqueIds++; //Increment ID
$inputs[0].id = "employee_id" + uniqueIds;
$inputs[1].id = "employee_fname" + uniqueIds;
$inputs[1].id = "employee_lname" + uniqueIds;
$inputs[2].id = "employee_wage" + uniqueIds;
//$inputs.eq(0).focus();                     // Focus on the first text field
$thisRow.after($clone);                    // Add row after current one
});
</script>

<script>
                    //autosuggest script
    function lookup(employee_fname) {
        if(employee_fname.length == 0) {
            // Hide the suggestion box.
            $('#suggestions').hide();
        } else {
            $.post("test_ac.php", {queryString: ""+employee_fname+""},function(data){
                if(data.length >0) {
                    $('#suggestions').show();
                    $('#autoSuggestionsList').html(data);
                }
            });
        }
    } // lookup

    function fill1(thisValue) {
        $('#employee_fname').val(thisValue);
        setTimeout("$('#suggestions').hide();", 200);
    }   
    function fill2(thisValue) {
        $('#employee_id').val(thisValue);
        setTimeout("$('#suggestions').hide();", 200);
    }   
    function fill3(thisValue) {
        $('#employee_lname').val(thisValue);
        setTimeout("$('#suggestions').hide();", 200);
    }   
    function fill4(thisValue) {
        $('#employee_wage').val(thisValue);
        setTimeout("$('#suggestions').hide();", 200);
    }   
 </script>
 <style>
        .suggestionsBox {
        position: relative;
        left: 30px;
        margin-top:100px;
        margin-left:-35px;
        margin-right:0px;
        margin-bottom:0px;
        padding:0px;
        width: 150px;
        background-color: #212427;
        -moz-border-radius: 7px;
        -webkit-border-radius: 7px;
        border: 2px solid #000; 
        color: #fff;
    }

    .suggestionList {
        margin: 0px;
        padding: 0px;
    }

    .suggestionList li {

        margin: 0px 0px 3px 0px;
        padding: 3px;
        cursor: pointer;
    }

    .suggestionList li:hover {
        background-color: #659CD8;
    }
    </style>

 </head>
 <body>
 <table>
 <tr>
 <td width="200">
 <div class="suggestionsBox" id="suggestions" style="display: none;">
                <div class="suggestionList" id="autoSuggestionsList">
                &nbsp;
                </div>
                </div>
 </td>
 <td>
 <table>
 <tr>
 <td width="120" align="left" style="width:120px;">ID</td>
 <td width="120" align="left" style="width:120px;">First Name</td>
 <td width="120" align="left" style="width:120px;">Last Name</td>
 <td width="120" align="left" style="width:120px;">Wage</td>
 </tr>
 </table>
 <table id="employee">
 <tr>
 <td align="left"><input type="text" id="employee_id"   name="employee_id"      style="width:100px; background-color:#e5e5e5;" readonly="readonly" onblur="fill2();"/></td>
 <td align="left"><input type="text" id="employee_fname" name="employee_fname"  style="width:100px;" onblur="fill1();" onkeyup="lookup(this.value);"/></td>
 <td align="left"><input type="text" id="employee_lname" name="employee_lname"  style="width:100px; background-color:#e5e5e5;" readonly="readonly" onBlur="fill3"/></td>
  <td align="left"><input type="text" id="employee_wage"    name="employee_wage"    style="width:100px; background-color:#e5e5e5;" readonly="readonly" onblur="fill4();" /></td>
 </tr>
 </table>

 </td>
 </tr>
 </table>

 </body>
 </html>

test_ac.php 

 <?php

    // PHP5 Implementation - uses MySQLi.
    // mysqli('localhost', 'yourUsername', 'yourPassword', 'yourDatabase');
    $db = new mysqli('localhost', 'root' ,'passsword', 'database');

    if(!$db) {
        // Show error if we cannot connect.
        echo 'ERROR: Could not connect to the database.';
    } else {
        // Is there a posted query string?
        if(isset($_POST['queryString'])) {
            $queryString = $db->real_escape_string($_POST['queryString']);

            // Is the string length greater than 0?

            if(strlen($queryString) >0) {
                // Run the query: We use LIKE '$queryString%'
                // The percentage sign is a wild-card, in my example of countries it works like this...
                // $queryString = 'Uni';
                // Returned data = 'United States, United Kindom';

                // YOU NEED TO ALTER THE QUERY TO MATCH YOUR DATABASE.
                // eg: SELECT yourColumnName FROM yourTable WHERE yourColumnName LIKE '$queryString%' LIMIT 10

                $query = $db->query("SELECT fname, lname, id, wage FROM employees WHERE fname LIKE '$queryString%' LIMIT 10");
                if($query) {
                    // While there are results loop through them - fetching an Object (i like PHP5 btw!).
                    while ($result = $query ->fetch_object()) {
                        // Format the results, im using <li> for the list, you can change it.
                        // The onClick function fills the textbox with the result.

                        // YOU MUST CHANGE: $result->value to $result->your_colum
                        echo '<li onClick="fill1(\''.$result->fname.'\');
                        fill2(\''.$result->id.'\'); 
                        fill3(\''.$result->lname.'\'); 
                        fill4(\''.$result->wage.'\'); 
                        ">'.$result->lname. ',' .$result->fname.'</li>';    



                        }
                    } else {
                    echo 'ERROR: There was a problem with the query.';
                }
            } else {
                // Dont do anything.
            } // There is a queryString.
        } else {
            echo 'There should be no direct access to this script!';
        }
    }


?>

1 Ответ

0 голосов
/ 10 января 2012

Измените сценарий автозаполнения с кодом ниже. Это решило мою проблему. 

   var sourceElement;
                    //autosuggest script
    function lookup2(source, employee_id) {
        sourceElement = source;
        if(employee_id.length == 0) {
            // Hide the suggestion box.
            $('#suggestions2').hide();
        } else {
            $.post("../../autocomplete/jobadd_employee.php", {queryString: ""+employee_id+""},function(data){
                if(data.length >0) {
                    $('#suggestions2').show();
                    $('#autoSuggestionsList2').html(data);
                }
            });
        }
    } // lookup

    function fill8(thisValue) {
        $('#employee_id'+sourceElement.id.replace("employee_id","")).val(thisValue);
        setTimeout("$('#suggestions2').hide();", 200);
    }   
    function fill9(thisValue) {
        $('#employee_fname'+sourceElement.id.replace("employee_id","")).val(thisValue);
        setTimeout("$('#suggestions2').hide();", 200);
    }   
    function fill10(thisValue) {
        $('#employee_lname'+sourceElement.id.replace("employee_id","")).val(thisValue);
        setTimeout("$('#suggestions2').hide();", 200);
    }   
    function fill11(thisValue) {
        $('#employee_wage'+sourceElement.id.replace("employee_id","")).val(thisValue);
        setTimeout("$('#suggestions2').hide();", 200);
    }
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...