Question

我要做的是允许用户根据下面搜索框中的艺术家姓名（以HTML格式）查找艺术家，然后向用户显示艺术家的姓名和如果用户的搜索与数组中的艺术家匹配，则链接到不同的HTML页面。

麻烦的是，当我点击＆＃34;搜索＆＃34;该页面将返回原始页面。我不确定断开连接的位置。我不确定我是否正确地要求提供身份证件;如果身份证在正确的地方;如果U.addEvent函数中的操作是正确的;或者如果搜索功能写得正确。

有什么想法吗？

RD

<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>

Answer 1

search什么都不返回。但事件处理程序需要是一个函数。因此，要么U.addEvent(U.$('searchBox'), 'click', search);要么让search()返回事件处理程序。

现在基本上你正在调用搜索处理程序，你的表单什么都不做。

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

Answer 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)

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

要实现这一点，请将search函数添加为submit元素的form事件的处理程序：

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

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

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

  .....

}

您还有一些轻微的语法错误，我试图在此处修复：http://jsfiddle.net/rGcpX/2/

创建一个搜索框

2 个答案: