JavaScript 变量和用户输入

Question

情况：

目前我有一个使用 jQuery 的自动完成插件的搜索框，允许用户搜索某项运动的球队，然后一旦在提交按钮上找到 select，它将球队附加为一个列表项（最好的功能是当用户点击实际的团队来附加该项目时，但此时我不确定如何将点击功能应用于自动完成下拉列表——欢迎提出建议）。

我正在寻找一种方法将新添加的列表项与预定义的 class 或 id 相关联，以便某些格式和显示会在添加的列表项 appended.Basically 用户可以搜索 NHL、NFL 等中的任何球队，我需要根据他们 select 的球队将文本颜色和徽标与它们配对 - 但徽标将单独出现在正文中而不是列表。

示例代码：

<!doctype html>
<html>
<head>
 <title>TEST</title>
 <meta charset="utf-8" />
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1" />

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style type="text/css">

</head>

<body>

    <div class="ui-widget">
        <input id="tags" type="text" placeholder="Search Teams"/>
            <input id="submit" type="submit"/>
    </div>
        <ul class="target">
        </ul>

<script>

    $(function() {
            var availableTeams = [
                "Boston Red Sox",
                "New England Patriots",
                "Boston Celtics",
                "Boston Bruins",
                "New England Revolution"
            ];
    $( "#tags" ).autocomplete({
            source: availableTeams
        });
    });

    $('#submit').click(
        function() {
            var term = $('#tags').val();
                $('.target').append("<li>"+term+"</li>");
                }
            );
</script>       

</body>

</html>

我曾尝试结合使用 if 语句和 document.getElementById 来尝试更改 html 内容，但我无法将我的想法拼凑起来。

我的想法：

if（标签=="Boston Red Sox"）{ 然后在下方追加具有特定格式的"Boston Red Sox"作为列表项和相应的标识。 } 别的 { 不要做任何事 }

http://jsfiddle.net/kumcav30/（理想情况下，附加后它类似于 fiddle）。非常感谢任何输入。

Answer 1

jQuery 将允许您创建元素并在将它们添加到文档之前更改它们。所以你可以这样做：

$('#submit').click(
    function() {
        var term = $('#tags').val();
            var newelement = $("<li>"+term+"</li>");

            if (term == "Boston Red Sox") {
                newelement.addClass("your-class");
                //whatever else you need to do
            }

            $('.target').append(newelement);
        }
    );

Answer 2

for 循环怎么样？

$(function(){    

var availableTeams = [
    "Boston Red Sox",
    "New England Patriots",
    "Boston Celtics",
    "Boston Bruins",
    "New England Revolution"
];

$( "#tags" ).autocomplete({
    source: availableTeams
});

var availableLogos = [
    "redSox",
    "patriots",
    "celtics",
    "bruins",
    "englandRevolution"
];

function teamstyle(term){
    var l = availableTeams.length;
    for (var i = 0; i < l; i++){
        if (term == availableTeams[i]){
            var newelement = "<li class="+ availableLogos[i] +">"+term+"</li>"
            $('.target').append(newelement);
        }
    }
}

$('#submit').click(function() {
    var term = $('#tags').val();
    teamstyle(term);
});

});

然后你可以使用 css 比如：

.redSox {color: red; background: url('path/to/logo.png');}
.bruins {color: yellow;}
....

你的问题有点令人费解。考虑将其缩小到您想要实现的目标 (:

JavaScript 变量和用户输入

JavaScript Variables and User Input

javascript

jquery

html

css

user-input