Question

我有一个表单，它在两个元素上使用jQuery UI自动完成功能，并且还能够使用SheepIt!插件克隆自己。

这两个元素都是文本输入。从第一个自动填充（大陆）中选择一个值后，第二个自动填充（国家/地区）的值将填充依赖于第一个选择的选项。

我的问题是，当克隆生成时，如果用户从第一个自动完成（大陆）中选择一个选项，它将更改所有克隆上的第一个输入值。第二个输入（国家/地区）不会发生这种情况。

我错过了什么？

注意：表单id和name中的#index＃不是CFML。我正在使用PHP，哈希标签是SheepIt的一部分！克隆插件。

使用Javascript：

<script src="../../scripts/jquery-1.6.4.js"></script>
<script src="../../scripts/jqueryui/ui/jquery.ui.core.js"></script>
<script src="../../scripts/jquery.ui.widget.js"></script>
<script src="../../scripts/jquery.ui.position.js"></script>
<script src="../../scripts/jquery.ui.autocomplete.js"></script>
<script src="../../scripts/jquery.sheepIt.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {

    function ord(chr) {

        return chr.charCodeAt(0);

    }

    function chr(num) {

        return String.fromCharCode(num);

    }

    function quote(str) {

        return '"' + escape(str.replace('"', "'")) + '"';

    }

    String.prototype.titleCase = function () {

        var chars = [" ", "-"];
        var ths = String(this).toLowerCase();

        for (j in chars){

            var car = chars[j];
            var str = "";
            var words = ths.split(car);
            for(i in words){

                str += car + words[i].substr(0,1).toUpperCase() + words[i].substr(1);

            }

            ths = str.substr(1);

        }

        return ths;

    }

    function incrementTerm(term) {

        for (var i = term.length - 1; i >= 0; i--){

            var code = term.charCodeAt(i);

            if (code < ord('Z'))

                return term.substring(0, i) + chr(code + 1);

        }

        return '{}'

    }

    function parseLineSeperated(data){

        data = data.split("\n");

        data.pop(); // Trim blank element after ending newline

        var out = []

        for (i in data){

            out.push(data[i].titleCase());

        }

        return out;

    }

    function loadcontinent(request, response) {

        var startTerm = request.term.toUpperCase();

        var endTerm = incrementTerm(startTerm);

        $.ajax({

            url: '/db/continent.php?startkey='+startTerm+'&endkey='+endTerm,

            success: function(data) {

                var items = parseLineSeperated(data);

                response(items);

            },

            error: function(req, str, exc) {

                alert(str);

            }

            });

    }

    function loadcountry(request, response) {

        var startTerm = request.term.toUpperCase();

        var endTerm = incrementTerm(startTerm);

        var continent = $('.continent_autocomplete').val().toUpperCase();

        $.ajax({

            url: '/db/country.php?key=' + continent,

            success: function(data) {

                var items = parseLineSeperated(data);

                response(items);


            },

            error: function(req, str, exc) {

                alert(str);

            }

            });

    }

    $('#location_container_add').live('click', function() { 
        $("input.continent_autocomplete").autocomplete(continent_autocomplete);
        $("input.continent_autocomplete").keyup(continent_autocomplete_keyup);  
        $("input.country_autocomplete").autocomplete(country_autocomplete);     
        $("input.country_autocomplete").keyup(country_autocomplete_keyup);      
        $('input.country_autocomplete').focus(country_autocomplete_focus);
    });


    var location_container = $('#location_container').sheepIt({
            separator: '',
            allowRemoveLast: true,
            allowRemoveCurrent: false,
            allowRemoveAll: false,
            allowAdd: true,
            allowAddN: false,
            maxFormsCount: 10,
            minFormsCount: 1,
            iniFormsCount: 1
    });

    var continent_autocomplete = {

        source: loadcontinent,

        select: function(event, ui){

            $("input.continent_autocomplete").val(ui.item.value);

        }

    }

    var continent_autocomplete_keyup = function (event){

        var code = (event.keyCode ? event.keyCode : event.which);

        event.target.value = event.target.value.titleCase();

    }

    var country_autocomplete = {

        source: loadcountry,

    }

    var country_autocomplete_keyup = function (event){

        event.target.value = event.target.value.titleCase();

    }

    var country_autocomplete_focus = function(){           
        if ($(this).val().length == 0) {
            $(this).autocomplete("search", " ");
        }
    }   

    $("input.continent_autocomplete").autocomplete(continent_autocomplete);
    $("input.continent_autocomplete").keyup(continent_autocomplete_keyup);
    $("input.country_autocomplete").autocomplete(country_autocomplete);
    $("input.country_autocomplete").keyup(country_autocomplete_keyup);
    $('input.country_autocomplete').focus(country_autocomplete_focus);

});

</script>

HTML：

<div id="location_container">
    <div id="location_container_template" class="location_container">
        <div id="continent_name">
            <label> Continent Name:</label>
            <input type="text" id="continent_name_#index#" name="continent_name_#index#" class="continent_autocomplete" />
        </div>
        <div id="country">
            <label> Country:</label>
            <input type="text" id="country_autocomplete_#index#" name="country_autocomplete_#index#" class="country_autocomplete" />
        </div>
    </div>
</div>

Answer 1

    select: function(event, ui){

        $("input.continent_autocomplete").val(ui.item.value);

    }

该代码明确说明将具有“continent_autocomplete”类的每个<input>的值设置为所选值。

你可能想要像

这样的东西

        $(this).val(ui.item.value);

但这取决于您的自动填充代码的工作方式。

Answer 2

这一行：$("input.continent_autocomplete").val(ui.item.value);正在使用类continent_autocomplete更新所有输入。

<强>更新来自jQueryUI Autocomplete Doc:select：

从菜单中选择项目时触发; ui.item指的是所选项目。 select的默认操作是替换文本字段的值与所选项的值。取消这个事件阻止值被更新，但不会阻止关闭菜单。

您根本不需要select位，看起来您只是尝试实现默认操作。

为什么jQuery自动完成更新克隆表单上的所有元素？

2 个答案: