创建搜索框答案

【问题标题】：Creating a Search Box创建搜索框
【发布时间】：2014-04-21 13:06:54
【问题描述】：

我想要做的是允许用户在下面的搜索框中（在 HTML 中）根据艺术家的名字来寻找艺术家，然后向用户展示艺术家的名字和指向不同 HTML 页面的链接，如果用户的搜索匹配数组中的艺术家。

问题是，当我点击“搜索”时，页面又回到了原来的页面。我不确定断开连接在哪里。我不确定我是否正确地要求 ID；身份证是否在正确的位置；如果动作在 U.addEvent 函数中是正确的；或者如果搜索功能编写正确。

有什么想法吗？

研发

<body>
<div class="imgs"> <a target="_blank" href=""><img src="img/04.png" alt="img" /></a></div>
</div> 

    <div class="form">
    <form method="post" action="handler.php">
       <input name="textfield" id="searchBox" type="text" class="colortext"/>
    </form>
    </div>
</div>

<script>
var fakeDatabase = [];

var foxyShazam = {
    id: 'foxyShazam_FS',
    title: 'Foxy Shazam',
    artist: 'Foxy Shazam',
    price: '$14.99',
    releaseDate: new Date(1968, 10, 22),
    quantity: 50,
    link: "albums/foxyShazam.html",]
};

var foxyShazam2 = {
    id: 'foxyShazam_FS_2',
    title: 'Foxy Shazam 2',
    artist: 'Foxy Shazam 2',
    price: '$14.99',
    releaseDate: new Date(1968, 10, 22),
    quantity: 50,
    link: "albums/foxyShazam.html"]
};

var thriller = {
    id: 'thriller_MJ',
    title: 'Thriller',
    artist: 'Michael Jackson',
    price: '$12.99',
    releaseDate: new Date(1982, 10, 30),
    quantity: 35,
    link: "albums/thriller.html"
};

var thriller2 = {
    id: 'thriller_MJ_2',
    title: 'Thriller 2',
    artist: 'Michael Jackson 2',
    price: '$12.99',
    releaseDate: new Date(1982, 10, 30),
    quantity: 35,
    link: "albums/thriller.html"]
};

fakeDatabase.push(foxyShazam, foxyShazam2, thriller, thriller2);

//function displayAlbum() {
//    'use strict';
//    for (var i=0; i < fakeDatabase.length; i++) {
//        alert(fakeDatabase[i].title);}
//};
//displayAlbum(fakeDatabase);

var U = {
    $: function (id) {
        'use strict';
        if (typeof id === 'string') {
            return document.getElementById(id);
        }
    },
    setText: function(id, message) {
        'use strict';
        if ( (typeof id == 'string')
        && (typeof message == 'string') ) {

            // Get a reference to the element:
            var output = this.$(id);
            if (!output) return false;

            // Set the text
            if (output.textContent !== undefined) {
                output.textContent = message;
            } else {
                output.innerText = message;
            }
            return true;
        } // End of main IF.
    },
    addEvent: function(obj, type, fn){
        'use strict';
        if (obj && obj.addEventListener) {
            obj.addEventListener(type, fn, false);
        } else if (obj && obj.attachEvent) {
            obj.attachEvent('on' + type, fn);
        }
    },
    removeEvent: function(obj, type, fn) {
        'use strict';
        if (obj && obj.removeEventListner) {
            obj.removeEventListner(type, fn, false);
        }
        else if (obj && obj.removeEvent) {
            obj.removeEvent('on' + type, fn);
        }
    }
};

function search() {
    'use strict';
    var newSearch = U.$('searchBox');
        if (typeof newSearch == 'string') {
            if (!newSearch) 
                {return false;};
            if (newSearch.textContent !== undefined) {
                for (var i=0; i < fakeDatabase.length; i++) {
                    if (i == newSearch) {
                        var options = document.getElementById('options');
                        (options.innerText = ((fakeDatabase[i].artist + '\n') + (fakeDatabase[i].link));
                        return true;
                    }
                }
            }
        }
    };

U.addEvent(U.$('searchBox'), 'click', search());

</script>
</body>

【问题讨论】：

很确定应该是U.addEvent(..., ..., search)，search后面没有括号

标签： javascript function search

【解决方案1】：

search 不返回任何内容。但是事件处理程序必须是一个函数。所以要么你做U.addEvent(U.$('searchBox'), 'click', search); 要么让search() 返回一个事件处理程序。

基本上现在您会立即调用搜索处理程序，而您的表单什么也不做。

您还可以在 input 字段上使用 click 处理程序。这将毫无用处，因为您不希望用户只需单击输入字段时发生任何事情。

【讨论】：

【解决方案2】：

我看到了几个错误。 @TheShellfishMeme 已经指出了其中两个：

首先，您使用search 函数的返回值作为事件处理程序，而不是search 函数本身：

// this calls the 'search' function and uses it's return value as event handler
U.addEvent(U.$('searchBox'), 'click', search())

// this uses the function 'search' as the event handler
U.addEvent(U.$('searchBox'), 'click', search)

第二，您在input 元素上添加click 处理程序，这将导致每次用户单击输入字段时触发search 函数（单击是鼠标事件）。我猜你真的希望在用户点击ENTER 或提交按钮时触发搜索功能。

为此，添加search 函数作为form 元素的submit 事件的处理程序：

<form id="searchForm">
....
U.addEvent(U.$('searchForm'), 'submit', search)

第三，在您的搜索功能被触发后，您需要确保事件不会进行到默认的事件行为，即 POST 数据。要解决这个问题，您需要一个event.preventDefault()。但是您还需要在函数定义中捕获 event 变量：

function search (event) {
  event.preventDefault();

  .....

}

你还有一些小的语法错误，我在这里尝试修复：http://jsfiddle.net/rGcpX/2/

【讨论】：