Question

我是初学编码员，我正在尝试重新创建icomoon的搜索功能（键入一个单词并显示相关图像），但是我无法在输入字段中输入值来通过div触发图像，

任何人都可以告诉我我错在哪里，我尝试使用自动完成但我必须按下一个下拉按钮来触发图像。这是我的第二稿，但我仍然坚持如何解释价值，

提前致谢

HTML

<div class="container">
    <div class="text_search">
        <form id='text-form' action='#'>
            <h1><label for="tags">What did he say?</label></h1>
            <input type="text" id="project">
            <p><img class="container-icon" src="img/transparent.png" class="ui-state-default" alt=""></p>
            <input type="hidden" id="project-id">
        </form>

        <div class="blue"><img src="img/blue.png"></div>
        <div class="grey"><img src="img/grey.png"></div>
        <div class="mauve"><img src="img/mauve.png"></div>
        <div class="orange"><img src="img/orange.png"></div>
        <div class="pourpre"><img src="img/pourpre.png"></div>
        <div class="vert"><img src="img/vert.png"></div>
        <div class="yellow"><img src="img/yellow.png"></div>
    </div>
</div>

JS

$(function() {
    var availableTags = [
        {value: "house", icon: "blue.png"},
        {value: "sunny", icon: "yellow.png"},
        {value: "love", icon: "mauve.png"},
        {value: "dance", icon: "orange.png"},
        {value: "jump", icon: "pourpre.png"},
        {value: "tree", icon: "vert.png"},
        {value: "tree", icon: "grey.png"},

        "color",
        "star",
        "balloon",
        "green",
        "yellow",
        "drawing",
        "princess",
        "horse",
        "rose",
        "super hero",
        "king",
        "pink",
        "blue",
        "bird",
        "flower",
        "clouds"
    ];
    function split( val ) {
        return val.split( / \s*/ );
    }
    function extractLast( term ) {
        return split( term ).pop();
    }

    $('#text-form').on('submit', function(event){
        var keyword = $('#project', this).val();
        $( ".container-icon" ).attr( "src", "img/" + ui.item.icon );

        console.log(keyword)

        event.preventDefault();
    })

});

Answer 1

进行了一些更改并删除了不相关的部分（对于POC）：

present image according to search term

    $(function() {
    var foundImage;
    var availableTags = [
      {value: "house", icon: "dog1.jpg"},
      {value: "sunny", icon: "dog2.jpg"},
      {value: "love", icon: "dog3.jpg"}
    ];
    function split( val ) {
      return val.split( / \s*/ );
    }
    function extractLast( term ) {
      return split( term ).pop();
    }

//get the value of a input field
    $('#text-form').on('submit', function(event){
      var keyword = $('#project', this).val();
      foundImage = false;
        $.grep( availableTags, function( n, i ) {
        if (n.value === keyword) {
            $( ".container-icon" ).attr( "src", "http://animalia-life.com/data_images/dog/" + n.icon );            
            foundImage = true;
        }
    });      
            if (!foundImage) {
                $( ".container-icon" ).attr( "src", "img/transparent.png");
            }        
      event.preventDefault();
    })
  });

根据文本输入值加载图像

1 个答案: