代码之家 › 专栏 › 技术社区 › Marty

JavaScript和JQuery使用CSV文件进行多维数组搜索

jquery javascript php

Marty · 技术社区 · 14 年前

我有一个CSV文件,2列名称;图像,

//--&燃气轮机;这是应该发生的事情<--//

当用户执行搜索时,他们在文本字段中键入一些内容,自动完成下拉列表显示所有与查询匹配的可用名称,他们单击搜索,加载图标显示几秒钟,同时代码检查匹配情况,然后使用jQuery将结果显示给用户(将在主搜索框下使用向下滑动操作来显示结果)

我有一个问题,从搜索中获取信息,以匹配我的数组值,并带回名称值的相关图像。。我所需要的是搜索字段值带回与该名称关联的相关图像。。。并在结果区向用户显示图片和标题。。。

<?php
$maxlinelength = 1000;
$fh = fopen('tartans.csv', 'r');
$firstline = fgetcsv($fh, $maxlinelength);
$cols = count($firstline);

$row = 0;
$inventory = array();

    while ( ($nextline = fgetcsv($fh, $maxlinelength)) !== FALSE )
    {
        for ( $i = 0; $i < $cols; ++$i )
                    {
       $inventory[$firstline[$i]][$row] = $nextline[$i];
    }
    ++$row;
}
fclose($fh);
?>

这将从csv生成名称列表,用逗号分隔,然后使用javascript split()函数加载auto complete to函数的所有名称。。

<script type="text/javascript">
$(document).ready(function(){
   var data = '<?php foreach( $inventory['NAME'] as $key => $value){
                          echo $value.",";
                 }?>'.split(",");
   $("#s").autocomplete(data);
})
</script>

//jquery来处理表单提交并返回结果

<script type="text/javascript">
$(document).ready(function() {  

    $('#loader').hide();
    $('#tartanResults').hide();

    $('#submit').click(function() {
    $.ajax({
        url: '/select_tartan.php', // current page
        beforeSend: function() { 
                   $('#loader').show(); 
                },
                complete: function() { 
           $('#loader').hide();
           $('#tartanResults').show();
        }
    });
        return false;
   });// submit
});// doc ready
</srcipt>

这就是我遇到的问题,试图返回数组中加载的特定名称的匹配键值,并将其与其图像匹配,

使用print_r($inventory);//虽然它大了很多,

Array
(
    [NAME] => Array
        (
            [0] => Abercrombie Ancient
            [1] => Abercrombie Modern
            [2] => Aberdeen Tartan Modern
            [3] => Agnew Ancient
            [4] => Allison Ancient
            [5] => Anderson Ancient
            [6] => Anderson Modern
            [7] => Anderson Weathered
            [8] => Angus Ancient
            [9] => Angus Modern
)

    [IMAGE] => Array
        (
            [0] => images/rare/abc_ar.jpg
            [1] => images/rare/abc_mr.jpg
            [2] => images/rare/abd_mr.jpg
            [3] => images/rare/agw_ar.jpg
            [4] => images/rare/all_ar.jpg
            [5] => images/rare/and_ar.jpg
            [6] => images/rare/and_mr.jpg
            [7] => images/rare/and_wr.jpg
            [8] => images/rare/ang_ar.jpg
            [9] => images/rare/ang_mr.jpg
    )
)

我只需要显示返回的名称和图像,就像

<?php 
   echo $inventory['NAME'][8];
   echo $inventory['IMAGE'][8];
?>

事实证明,这比我最初想象的要困难。。

任何帮忙的人都很感激。。

马蒂

<!-- SEARCH FORM / LOADER-->
<div id="searchbox">
<h3>FIND YOUR TARTAN <small>press enter to search.</small></h3>
<form id="tartanSearch" action="select_tartan.php" method="get">
    <div class="search">
        <input type="text" size="70" class="inputbox" alt="Search" id="s" name="search" />
        <input value="Search" id="submit" type="submit" />
    </div>
</form>
</div>
<div id="loader"><img src="images/indicator.gif" width="16" height="16" /></div>

<!-- RESULTS -->
<div id="tartanResults">
  <h3><!-- WERE THE NAME LOADS --></h3>
  <div class="tartan_img"><!-- WERE THE IMAGE LOADS --></div>
  <div class="tartan_text">
    <ul style="list-style:none;">
      <li>Description text here</li>
      <li>With more text here aswell</li>
      <li>We can have some here also</li>
    </ul>
  </div>
</div>

1 回复 | 直到 14 年前

Tomasz StruczyÅski 14 年前

我相信你的问题有更多的答案,但这是根据你迄今为止所写的最简单的答案:

创建新文件仅用于输出搜索结果。当然,您应该通过将CSV包装到函数中并包含在两个文件(主文件和新文件)中来共享将CSV加载到数组的代码
您的主页应该有div,结果(id=“tartanResults”)为空。
新操作应返回搜索结果(以当前DIV contants的形式)

主页上results div的新外观

<!-- RESULTS -->
<div id="tartanResults">
</div>

( 实用工具.php (例如)

<?php
function loadCSVContents($fileName)
{
    $maxlinelength = 1000;
    $fh = fopen($fileName, 'r');
    $firstline = fgetcsv($fh, $maxlinelength);
    $cols = count($firstline);

    $row = 0;
    $inventory = array();

    while ( ($nextline = fgetcsv($fh, $maxlinelength)) !== FALSE )
    {
        for ( $i = 0; $i < $cols; ++$i )
           $inventory[$firstline[$i]][$row] = $nextline[$i];
        ++$row;
    }
    return $inventory;
    fclose($fh);
}
?>

带新操作的文件 ( (例如)

<?php

include('utility.php');
$inventory = loadCSVContents('tartans.csv');

$search = $_POST['search'];
$resultName = '';
$resultImage = '';
if ($search)
{
    $arr_key = array_search($search, $inventory['NAME']);
    $resultName = $inventory['NAME'][$arr_key];
    $resultImage = $inventory['IMAGE'][$arr_key];
}
?>
<h3><?php echo $resultName?></h3>
<div class="tartan_img"><img src="<?php echo $resultImage?>" /></div>
<div class="tartan_text">
  <ul style="list-style:none;">
    <li>Description text here</li>
    <li>With more text here aswell</li>
    <li>We can have some here also</li>
  </ul>
</div>

AJAX调用

$.ajax({
    url: '/tartansearch.php', // search page
    beforeSend: function() { 
       $('#loader').show(); 
    },
    complete: function() { 
        $('#loader').hide();
        $('#tartanResults').show();
    },
    success: function(data) {
        $('#tartanResults').html(data);
    }
});

我也不能保证我在这段代码中没有犯任何错误。但我想你会解决的。