jQuery从Ajax实时搜索中获取输入

时间:2015-08-12 13:29:15

标签: php jquery html ajax

我从这里使用Ajax Live Search:http://ajaxlivesearch.com/来搜索我的数据库中的城市 我在模态弹出窗口中打开搜索表单。如果我开始输入表格给我所有结果,从我在表格中输入的第一个字母开始。我可以选择所需的城市,它将在文本字段中设置。 现在我想要绘制值并将其发布在主页面上,我打开弹出窗口。 但似乎没有任何效果。 提供更好的图像,我会发布更多的代码。如果有这么多的话,请原谅我。 :)

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="/css/mailopen.css" type="text/css">
<link rel="stylesheet" href="/css/styles.css" type="text/css">
<link rel="stylesheet" href="css/modality.css">
<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.min.css" />
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('#getcity').click(function () {

        $("#ls_query").html("");

        $(':input').each(function (index) {
            console.log($(this));
            $("#ls_query").append("<b>Input Type:</b> " + $(this).attr('type') + " ");
        });
    });
});
</script>

<script src="http://code.jquery.com/jquery-latest.js"></script>
<div id="body_box_tabs">
<ul class="tabs" data-persist="true">

    <li class="selected"><a href="#view1">Mitgliedersuche</a></li>
    <li><a href="#view2">Erweiterte Suche</a></li>
</ul>  
<div class="tabcontents">
    <div id="view1">
        <p style="color: #05296B; font-weight: bold;">In: 
 <div id="ls_query"></div>
        <button class="my_popup_open">Ort suchen</button></div></div>

<div id="my_popup">
    <?php include 'citysearch.php'; ?>
</div>

<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="js/index.js"></script>
<script src="js/jquery.popupoverlay.js"></script>
<script>
  $(document).ready(function () {
      $('#my_popup').popup();
  });
 </script>

<div id="ls_query"></div>我希望显示搜索结果。

所以这是在弹出窗口中打开的搜索页面

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/modality.css">
<link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.min.css" />
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js"></script>
<?php file_exists(__DIR__ . DIRECTORY_SEPARATOR . 'class' .   DIRECTORY_SEPARATOR . 'handler.php') ? require_once(__DIR__ .  DIRECTORY_SEPARATOR . 'class' . DIRECTORY_SEPARATOR . 'handler.php') :  die('There is no such a file: handler.php');
file_exists(__DIR__ . DIRECTORY_SEPARATOR . 'class' . DIRECTORY_SEPARATOR .   'config.php') ? require_once(__DIR__ . DIRECTORY_SEPARATOR . 'class' .   DIRECTORY_SEPARATOR . 'config.php') : die('There is no such a file:   config.php');
?>
<link href='http://fonts.googleapis.com/css?family=Quattrocento+Sans:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
 <link rel="stylesheet" href="css/fontello.css">
 <link rel="stylesheet" href="css/animation.css">
 <!--[if IE 7]>
 <link rel="stylesheet" href="css/fontello-ie7.css">
 <![endif]-->
 <link rel="stylesheet" type="text/css" href="css/style.min.css">

<div class="ls_container">
<!-- Search Form -->
<form accept-charset="UTF-8" class="search" id="ls_form" name="ls_form">
    <?php
    Handler::get_javascript_anti_bot();
    ?>
    <input type="hidden" name="ls_anti_bot" id="ls_anti_bot" value="">
    <input type="hidden" name="ls_token" id="ls_token" value="<?php echo Handler::get_token(); ?>">
    <input type="hidden" name="ls_page_loaded_at" id="ls_page_loaded_at" value="<?php echo time(); ?>">
    <input type="hidden" name="ls_current_page" id="ls_current_page" value="1">
    <input type="text" name="ls_query" id="ls_query" placeholder="gesuchter Ort" autocomplete="off"  maxlength="<?php echo Config::MAX_INPUT_LENGTH; ?>">
    <div id="ls_result_div">
        <div id="ls_result_main">
            <table>
                <tbody>

                </tbody>
            </table>
        </div>
        <div id="ls_result_footer">
            <div class="col page_limit">
                <select id="ls_items_per_page" name="ls_items_per_page">
                    <option value="5" selected>5</option>
                    <option value="10">10</option>
                    <option value="0">Alle</option>
                    </select>
                </div>
            <div class="col navigation">
                <i class="icon-left-circle arrow" id="ls_previous_page"></i>
            </div>
            <div class="col navigation pagination">
                <label id="ls_current_page_lbl">1</label> / <label id="ls_last_page_lbl"></label>
            </div>
            <div class="col navigation">
                <i class="icon-right-circle arrow" id="ls_next_page"></i>
            </div>
        </div>
    </div>
   </form>
   <input id="getcity" class="my_popup_close" type="submit" value="Übernehmen" >   
   </div>
   <script src="js/jquery-1.11.1.min.js"></script>
   <script type="text/javascript" src="js/script.min.js"></script>  

<input id="getcity" class="my_popup_close" type="submit" value="Übernehmen" >我希望获得价值。

但没有任何作用。或者还有其他方法可以获得价值吗?我现在挂了3天没有结果

2 个答案:

答案 0 :(得分:0)

保持

<input id="getcity" class="my_popup_close" type="submit" value="Übernehmen" > 

<form></form>标记内。这样您就可以在表单提交后收集价值。

答案 1 :(得分:0)

如果您使用的是最新版本,则可以使用自定义活动onResultClickonResultEnter来访问所选的值,如下所示:

jQuery(".mySearch").ajaxlivesearch({
loaded_at: <?php echo time(); ?>,
token: <?php echo "'" . $handler->getToken() . "'"; ?>,
max_input: <?php echo Config::getConfig('maxInputLength'); ?>,
onResultClick: function(e, data) {
    // get the index 1 (second column) value
    var selectedOne = 
jQuery(data.selected).find('td').eq('1').text();

    // set the input value
    jQuery('#ls_query').val(selectedOne);

    // hide the result
    jQuery("#ls_query").trigger('ajaxlivesearch:hide_result');
},
onResultEnter: function(e, data) {
    // do whatever you want
    // jQuery("#ls_query").trigger('ajaxlivesearch:search', {query: 
'test'});
}
});

干杯,