Question

我有一个CSV文件，2列名称＆amp;图像，

我正在使用Javascript / PHP在自动完成搜索字段中读取和显示名称列表。

// - ＆gt;这就是假设发生的事情＆lt; - //

当用户执行搜索时，他们在文本字段中键入内容，自动完成下拉，所有可用的名称与查询匹配，他们单击搜索，加载图标显示几秒钟，同时代码检查匹配，然后使用jQuery向用户显示结果（将使用向下滑动操作显示结果，在主#searchbox下）

我无法从搜索中获取信息以匹配我的数组值并带回Name值的相关图像..我所需要的只是搜索字段值带回与之相关的相关图像name ...并在结果div中显示用户的图像和标题...

到目前为止的代码如下..

// php读取csv文件并构建数组

<?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);
?>

// Javascript＆amp; PHP;

在自动完成脚本中包含名称这会生成csv中的名称列表，用逗号分隔，然后使用javascript split（）函数加载自动完成功能的所有名称。

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

我需要显示的是返回的Name：和Image，非常像

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

事实证明，这比我最初的想法更难......

任何帮助的人都非常感激..

玛蒂

//页面的基本Html

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

Answer 1

我确信你的问题有更多的答案，但这是最简单的答案，基于你到目前为止所写的内容：

仅用于输出搜索结果的新文件。当然，您应该通过将CSV包装到函数中来共享用于将CSV加载到数组的代码，并将其包含在两个文件中（主要文件和新文件）
您的主页应该有div，结果（id =“tartanResults”）为空。
您的ajax调用应该加载对此div的调用结果
您的新操作应该返回搜索结果（以当前DIV容器的形式）

以下是一些代码示例

主页上结果div的新外观

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

具有效用函数的文件（例如 utility.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);
}
?>

带有新操作的文件（例如 tartansearch.php ）

<?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);
    }
});

这只是一个切入点。例如，您可能希望使用比array_search更复杂的函数来实际查找索引。您应该注意错误报告。最基本的，你不应该使用CSV文件而是数据库（如果可能的话）。

我不能保证我在这段代码中没有犯任何错误。但我认为你会解决这些问题。

JavaScript＆amp;使用CSV文件进行JQuery多维数组搜索

1 个答案: