Question

更新

我需要能够从我的实际XML文档中引用XML，我不希望它只是变成jQuery ......

如何让以下行为发生...

搜索标签输入会搜索标签和值，但是，只会忽略每个输入字段的结果，因此输入Alabama会显示Alabama - AL，但只会给我Alabama状态和AL值

也使用

$.ajax({
        type: "GET",
        url: "states.xml", // change to full path of file on server
        dataType: "xml",
        success: parseXml,
        complete: setupAC,
        failure: function(data) {
            alert("XML File could not be found");
            }
    });

而不是var myXML

 var myXml = '<?xml version="1.0" encoding="UTF-8"?><states><state label=Alabama value=AL country="US"><state label=Alaska value=AK country="US"></states>';
$(document).ready(function() {
        var myArrLabel = [];
        var myArrValue = [];
        var myArrCountry = [];

        function parseXml(xml){
            $(xml).find("state").each(function(){
                var a1=[], a2=[], a3=[];
                a1.push($(this).attr("label"));
                a2.push($(this).attr("value"));
                a3.push($(this).attr("country"));
                $.each(a1, function(i, el){
                    if($.inArray(el, myArrLabel) === -1) myArrLabel.push(el);
                });
                $.each(a2, function(i, el){
                    if($.inArray(el, myArrValue) === -1) myArrValue.push(el);
                });
                $.each(a3, function(i, el){
                    if($.inArray(el, myArrCountry) === -1) myArrCountry.push(el);
                });
            }); 
        };
        parseXml( myXml );

        function fillIfUnique(box1, box2, attr1, attr2) {
            var value1 = box1.val();
            var valueItemsForLabel = $(myXml).find('state[' + attr1 + '="' + value1 + '"]');
            if ( valueItemsForLabel.length ) {
                var value2 = valueItemsForLabel.eq(0).attr( attr2 );
                console.log( 'value2: ' + value2 );
                var totalSame = $(myXml).find('state[' + attr1 + '="' + value1 + '"][' + attr2 + '="' + value2 + '"]');
                if( valueItemsForLabel.length==totalSame.length ) {
                    box2.val( value2 );
                } else {
                    box2.val( '' );
                };
            };
        };

        function setupAC() {
            $("input#labelBox").autocomplete({
                source: myArrLabel,
                minLength: 1,
                select: function(event, ui) {
                    $("input#labelBox").val(ui.item.value);
                    fillIfUnique($('#labelBox'), $('#valueBox'), 'label', 'value');
                    fillIfUnique($('#labelBox'), $('#countryBox'), 'label', 'country');
                }
            });
            $("input#valueBox").autocomplete({
                source: myArrValue,
                minLength: 1,
                select: function(event, ui) {
                    $("input#valueBox").val(ui.item.value);
                    fillIfUnique($('#valueBox'), $('#labelBox'), 'value', 'label');
                    fillIfUnique($('#valueBox'), $('#countryBox'), 'value', 'country');
                }
            });
            $("input#countryBox").autocomplete({
                source: myArrCountry,
                minLength: 1,
                select: function(event, ui) {
                    $("input#countryBox").val(ui.item.value);
                    fillIfUnique($('#countryBox'), $('#labelBox'), 'country', 'label');
                    fillIfUnique($('#countryBox'), $('#valueBox'), 'country', 'value');
                }
            });
        };
        setupAC();
    });

    </script>
<form name="search_form" id="searchForm" method="GET">
    <p><label for="labelBox">Label Search</label>
        <input type="text" id="labelBox" name="labelBox" /></p>
    <p><label for="valueBox">Value Search</label> <input type="text" id="valueBox" name="valueBox" /></p>
    <p><label for="countryBox">Country Search</label> <input type="text" id="countryBox" name="countryBox" /></p>

    <p><label></label> <button name="searchKeyword" id="searchKeyword">Submit</button></p>
</form>

Answer 1

我们必须遵循以下逻辑：自动完成选择值后，我们必须检查其他两个字段的值是否在其范围内是唯一的。例如，选择国家/地区代码 CA （xml value属性）具有唯一的label 加利福尼亚，以及唯一的country <强> US 即可。如果值不唯一，则擦除该输入值。检查函数名称为fillIfUnique()，请查看this Fiddle。

使用的HTML：

<h3>jQuery Autocomplete using XML as Data Source Example</h3>
<form name="search_form" id="searchForm" method="GET">
    <p><label for="labelBox">Label Search</label>
        <input type="text" id="labelBox" name="labelBox" /></p>
    <p><label for="valueBox">Value Search</label> <input type="text" id="valueBox" name="valueBox" /></p>
    <p><label for="countryBox">Country Search</label> <input type="text" id="countryBox" name="countryBox" /></p>

    <p><label></label> <button name="searchKeyword" id="searchKeyword">Submit</button></p>
</form>

脚本：

$(document).ready(function() {
    var myArrLabel = [];
    var myArrValue = [];
    var myArrCountry = [];

    function parseXml(xml){
        $(xml).find("state").each(function(){
            var a1=[], a2=[], a3=[];
            a1.push($(this).attr("label"));
            a2.push($(this).attr("value"));
            a3.push($(this).attr("country"));
            $.each(a1, function(i, el){
                if($.inArray(el, myArrLabel) === -1) myArrLabel.push(el);
            });
            $.each(a2, function(i, el){
                if($.inArray(el, myArrValue) === -1) myArrValue.push(el);
            });
            $.each(a3, function(i, el){
                if($.inArray(el, myArrCountry) === -1) myArrCountry.push(el);
            });
        }); 
    };
    parseXml( myXml );

    function fillIfUnique(box1, box2, attr1, attr2) {
        var value1 = box1.val();
        var valueItemsForLabel = $(myXml).find('state[' + attr1 + '="' + value1 + '"]');
        if ( valueItemsForLabel.length ) {
            var value2 = valueItemsForLabel.eq(0).attr( attr2 );
            console.log( 'value2: ' + value2 );
            var totalSame = $(myXml).find('state[' + attr1 + '="' + value1 + '"][' + attr2 + '="' + value2 + '"]');
            if( valueItemsForLabel.length==totalSame.length ) {
                box2.val( value2 );
            } else {
                box2.val( '' );
            };
        };
    };

    function setupAC() {
        $("input#labelBox").autocomplete({
            source: myArrLabel,
            minLength: 1,
            select: function(event, ui) {
                $("input#labelBox").val(ui.item.value);
                fillIfUnique($('#labelBox'), $('#valueBox'), 'label', 'value');
                fillIfUnique($('#labelBox'), $('#countryBox'), 'label', 'country');
            }
        });
        $("input#valueBox").autocomplete({
            source: myArrValue,
            minLength: 1,
            select: function(event, ui) {
                $("input#valueBox").val(ui.item.value);
                fillIfUnique($('#valueBox'), $('#labelBox'), 'value', 'label');
                fillIfUnique($('#valueBox'), $('#countryBox'), 'value', 'country');
            }
        });
        $("input#countryBox").autocomplete({
            source: myArrCountry,
            minLength: 1,
            select: function(event, ui) {
                $("input#countryBox").val(ui.item.value);
                fillIfUnique($('#countryBox'), $('#labelBox'), 'country', 'label');
                fillIfUnique($('#countryBox'), $('#valueBox'), 'country', 'value');
            }
        });
    };
    setupAC();
});

注意：我必须压缩并将XML插入脚本中。我删除了数组中的重复条目。

如何从一个HREF填充多个输入字段

1 个答案: