当前位置： 文江博客话题详情

使用克隆字段自动完成

发布于 2024-12-25 15:38:57 字数 7528 浏览 3 评论 0原文

我已经搜索过答案，并且有一些针对此类问题的答案，但不是我可以开始工作。如果您使用下面的代码并亲自尝试，我尝试设置的内容可能会得到最好的解释，但我会尝试解释一下自己。

我有几个输入字段，它们在输入数据后被克隆。现在我正在尝试将自动完成脚本与它集成。因此，人们所要做的就是输入一个人的名字，从弹出窗口中选择它，然后将数据放入单元格中。

问题是，除了初始行之外，它不会输入任何数据，因为克隆器通过增加其克隆的所有内容的 id 编号来更改 id。谁能指出我如何增加自动完成器的正确方向？或者如何为每个克隆重新运行？

谢谢大家，这是复制问题所需的文件。

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!';
        }
    }


?>
原文

I've already searched for the answer, and there are a few for this type of issue but not that I can get to work. What I am trying to setup is probably best explained if you use the code below and try it yourself, but I'll try to explain myself.

I have several input fields which are cloned after they have data inputted into them. Now I am trying to integrate an autocomplete script with it. So that all the one has to do is type the name of a person, select it from the popup and it puts the data into the cells.

The issue is that it won't input data for anything but the initial row, because the cloner changes the id by increasing the id number everything its cloned. Can anyone point me in the right direction of how to increment the autocompleter? Or how to rerun for each clone?

Thanks everyone, and here are the files needed to replicate the issue.

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">
                 
                </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!';
        }
    }


?>

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

提笔书几行 2025-01-01 15:38:57

将自动建议脚本更改为以下代码。这解决了我的问题。

   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);
    }

Change the autosuggest script to the code below. This solved my issue.

   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);
    }
回复 原文
~没有更多了~

关于作者

岁吢

暂无简介

文章
评论
586 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

紫罗兰の梦幻

文章 0 评论 0

-2134

文章 0 评论 0

liuxuanli

文章 0 评论 0

意中人

文章 0 评论 0

○愚か者の日

文章 0 评论 0

xxhui

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文