如何在页面上显示onclick功能的搜索结果

时间:2014-01-03 13:51:20

标签: javascript jquery html

我想在页面上显示搜索结果方面提供一些帮助。下面的脚本以数组形式显示结果。

脚本

<script type="text/javascript">
    function genericVideo_Handler(data)
    {
        var obj = $.parseJSON(data);
        for (var i = 0; i < obj.length; i++) {
            var row = obj[i];
            alert(row.video_description);
        }
    }
</script>

HTML

<div class="input-group">
    <input type="text" class="form-control" placeholder="Subject, Topic, Keyword" name="srch-term" id="srch-term">
    <div class="input-group-btn">
        <button class="btn btn-default" type="button" id ="searchSub" onClick="getVideosByKeywords(document.getElementById('srch-term').value, genericVideo_Handler)"><i class="glyphicon glyphicon-search"></i></button>
    </div>
</div>

php

public function getVideosByKeywords($keywords)
{
    $sql = sprintf('SELECT * FROM portal_videos WHERE MATCH(video_objectives,     video_keywords, video_description) AGAINST ("%s")', $keywords);

    $resultSet = $this->dataConnection->query($sql);

    if($resultSet === false) {
        trigger_error('Wrong SQL: ' . $sql . ' Error: ' . $this->dataConnection->error, E_USER_ERROR);
    } else {
        $rows_returned = $resultSet->num_rows;
    }

1 个答案:

答案 0 :(得分:0)

我想在jQuery中分享一些有关事件的基本信息。

您可以在点击事件中搜索关键字

$('element').event(fucntion () {
  // function to execute..
})

现在,既然你是jQuery的新手,我会尝试澄清这份工作。

$('button').click(function () { // on a click on botton
  $('.searchresults').show(); // show the div with the search results
})

这将是这样的:

<div class="searchresults">
  Search Results
    First result
    Second result
    Third result
</div>
<button>Show Results</button>
CSS中的

.searchresults {
  display: none;
}

现在,您可以更改代码并执行它。这次元素最初不可见,点击它后会出现一个按钮,您将看到结果。

您可以自己在PHP(服务器端)处理结果,并获得响应。然后填充元素(searchresults)并在单击按钮后显示它。

了解更多信息:

http://api.jquery.com/click/(jQuery Click)

http://api.jquery.com/category/selectors/(jQuery选择器)