Question

我有一个文本框，用户可以在列表框中输入值。然后，我有按钮来删除该值，或者对值进行排序。

我的问题是我希望按这两个分隔的值对值进行排序。例如，用户将在文本框中输入City = Chicago。并且有两个按钮，按城市排序＆＃39;和＆＃39;按价值排序＆＃39;在这种情况下，芝加哥的价值。

因此，经过几个小时的尝试，我无法弄清楚如何： 1.限制用户只能输入％=％之类的值（例如City = Chicago） 2.为等号

两侧的值分别设置排序按钮

Answer 1

<div class='teststyles'>

<h3>Test</h3>
Name/Value Pair
    <br />
    <input id="PairTextbox" type="text" value="city" />=<input id="PairTextbox1" type="text" />
    <input type="button" value="Add" id="addButton" />
    <br />
    <br />Name/Value Pair List
    <br />
    <select multiple="multiple" id="PairListbox"></select>
    <input type="button" value="Sort By Name" sort-type="0" id="sortName">
    <input type="button" value="Sort By Value" sort-type="1" id="sortValue"><br>
    <input type="button" value="Delete" id="deleteButton" />

脚本：

var listArray = [];

function addNewItem() {
    console.log("ok2");
    var textbox = document.getElementById('PairTextbox');
    var textbox1 = document.getElementById('PairTextbox1');
    var listbox = document.getElementById('PairListbox');
    var newOption = document.createElement('option');
    newOption.value = listArray.length-1; // The value that this option will have
    newOption.innerHTML = textbox.value + "=" + textbox1.value; // The displayed text inside of the <option> tags
    listbox.appendChild(newOption);
    listArray.push([textbox.value, textbox1.value, ]);

}

function deleteItem() {
    var listbox = document.getElementById('PairListbox');
    if (listbox.selectedIndex != -1) {
        console.log(listbox.selectedIndex);
        delete listArray[listbox.value];
        listbox.remove(listbox.selectedIndex);
    }
}

function sortItems(e) {
    var sorttype = e.target.getAttribute("sort-type");
    var $listbox = document.getElementById('PairListbox');
    var $options = listArray.map(function (option) {
        return option;
    });;
    $options.sort(function (a, b) {
        var an = a[sorttype],
            bn = b[sorttype];

        if (an > bn) {
            return 1;
        }
        if (an < bn) {
            return -1;
        }
        return 0;
    });
    $listbox.innerHTML = "";

    $options.forEach(function ($option, index) {
        var newOption = document.createElement('option');
        newOption.value = index; // The value that this option will have
        newOption.innerHTML = $option[0] + "=" + $option[1]; // The displayed text inside of the
        $listbox.appendChild(newOption);
    });
}

document.getElementById('addButton').addEventListener('click', addNewItem);
document.getElementById('sortName').addEventListener('click', sortItems);
document.getElementById('sortValue').addEventListener('click', sortItems);
document.getElementById('deleteButton').addEventListener('click', deleteItem);

Answer 2

对于那些想要使用jQuery，验证和自动排序的人this FIDDLE。 HTML是：

<div class='teststyles'>

    <h3>Test</h3>

    <p>Name/Value Pair</p>
    <p><input id="PairTextbox" type="text" /> <input type="button" value="Add" id="addButton" /></p>
    <p>Name/Value Pair List</p>
    <p><select multiple="multiple" id="PairListbox"></select></p>
    <p>
        <input id="byname" type="radio" name="sortby" value="name" checked="checked" /> <label for="byname">sort by name</label><br />
        <input id="byvalue" type="radio" name="sortby" value="value" /> <label for="byvalue">sort by value</label>
    </p>
    <p><input type="button" value="Delete selected" id="deleteButton" /></p>

</div>

和脚本：

// Keep your pairs in memory
var pairs = [];

// Keep record of dynamic elements
var listbox = $('#PairListbox');
var textbox = $('#PairTextbox');
var sortInput = $('input[name=sortby]');

function sortItems() {
    sortType = sortInput.filter(':checked').val();
    if ( sortType=='name' ) {
        // Sort by key
        console.log( 'sort by key' );
        pairs = pairs.sort(function (a, b) {
            return a.k.localeCompare(b.k);
        });
    } else {
        // Sort by value
        console.log( 'sort by val' );
        pairs = pairs.sort(function (a, b) {
            return a.v.localeCompare(b.v);
        });
    };
    console.log( pairs );
    console.log( '----------' );
};

function printItems() {
    var optionsHtml = '';
    $.each(pairs, function(i, item) {
        optionsHtml += '<option value="' + item.k + '=' + item.v + '">' + item.k + '=' + item.v + '</option>';
    });
    listbox.html(optionsHtml);
};

// Customize validation of new input
function validateInput() {
    var str = textbox.val().replace(/\s+/g, '_');
    var splited = str.split('=');
    if (splited.length == 2 && splited[0] && splited[1]) {
        // Maybe also check if pair already exists in array? 
        pairs.push({
            k: splited[0],
            v: splited[1]
        });
        return true;
    } else {
        false;
    };
}

function addNewItem() {
    if (validateInput()) {
        sortItems();
        printItems();
    } else {
        alert('Wrong input value!');
    }
}

function deleteItem() {
    var selectedItems = listbox.find('option:selected');
    selectedItems.each(function(i) {
        var thisItem = $(this);
        var thisValueSplit = thisItem.val().split('=');
        pairs = pairs.filter(function (el) {
            return !(el.k==thisValueSplit[0] && el.v==thisValueSplit[1]);
        });
        printItems();
    });
}

$('#addButton').on('click', addNewItem);
$('#deleteButton').on('click', deleteItem);
sortInput.on('change', function(e) {
    sortItems();
    printItems();
});

如何分隔文本框的值，以便我可以按每个值排序

2 个答案: