ユーザー入力後に結果を表示するJavaScript検索バー

debugcn 投稿 Dev

カイ

ローカルファイルのリストを表示するWebページがあり、ファイルのリストを調べて最初の一致を強調表示する検索バーがあります。

ただし、ユーザーがファイル名を検索した場合にのみファイルを表示するにはどうすればよいですか。したがって、すべてのファイルを表示するのではなく、検索条件に一致するファイルのみを返すようにします。

PHP、JavaScript、jQueryは、誰かがその分野で助けてくれるなら、ここでは完全にオプションです。

testexec.php：

<?php
$path = '/var/www/html/'; //get list of files
$files = scandir($path);

//display the links

foreach($files as $file) {
     if($file != '.' && $file != '..') {
        echo '<div><a href="readfile.php?file='.urlencode($file).'"> '.$file.'</a></div>';
     }
}

?>

readfile.php：

<?php
 // PHP script to allow the file to be downloaded
$filename = $_GET['file'];

if (file_exists($filename)) {
  header('Content-Description: File Transfer');
  header('Content-Type: application/octet-stream');
  header('Content-Disposition: attachment; 
filename="'.basename($filename).'"');
  header('Expires: 0');
  header('Cache-Control: must-revalidate');
  header('Pragma: public');
  header('Content-Length: ' . filesize($file));
  readfile($filename);
  exit;
 }
 ?>

    //検索
     バー

     関数のJavaScriptFindNext （）{ var str = document.getElementById（ "livesearch"）。value; 
            if（str == ""）{ 
                alert（ "検索するテキストを入力してください！"）; 
                戻る; 
            }
     サポートされている変数= false; 
            var found = false; 
            if（window.find）{// Firefox、Google Chrome、Safariが
                サポートされています= true; 
                    //一部のコンテンツが選択されている場合、検索の開始位置は
                    //選択の終了位置になり
                ますfound = window.find（str）; 
            } そうしないと {
                if（document.selection && document.selection.createRange）{// Internet Explorer、バージョン10.5より前のOpera 
                    var textRange = document.selection.createRange（）; 
                    if（textRange.findText）{//
                        サポートされているInternetExplorer = true; 
                            //一部のコンテンツが選択されている場合、検索の開始位置は
                            //選択の開始位置の後の位置になります
                        if（textRange.text.length> 0）{ 
                            textRange.collapse（true）; 
                            textRange.move（ "文字"、1）; 
                        }

                        found = textRange.findText（str）; 
                        if（found）{ 
                            textRange.select（）; 
                        } 
                    } 
                } 
            } 

            if（supported）{ 
                if（！found）{ 
                    alert（ "次のテキストが見つかりませんでした：\ n" + str）; 
                } 
            } 
            else { 
                alert（ "お使いのブラウザはこの例をサポートしていません！"）; 
            } 
        }

plonknimbuzz

これは本当に簡単です。イベントkeyupといくつかのコード修正を使用する必要があります

index.php

<input type="text" id="searchbar" placeholder="search file"> <span id="loading" style="display:none;">loading</span>
<div id="result"></div>
<script src="../../vendor/jquery/jquery-3.2.1.min.js"></script>
<script>
    $(function(){
        $('#searchbar').keyup(function(){//event after user release keyboard
            var val = $(this).val();
            if(val.length >= 2){//min 2 words to start find
                $.ajax({
                    url: 'search.php',
                    type: 'POST',
                    dataType: 'json', //we use json
                    data: {keyword: val},
                    beforeSend: function(){
                        $('#loading').show();
                    },
                    success: function(d){
                        if(d.ok==1){
                            $('#result').html(d.list);
                        }else{
                            alert(d.msg);
                        }
                        $('#loading').hide();
                    },
                    error: function(d){
                        alert('error');
                        $('#loading').hide();
                    }
                });
            }
        })
    });
</script>

search.php

<?php
$path = 'C:/xampp/htdocs/';
$keyword = isset($_POST['keyword']) ? $_POST['keyword'] : '';
$scan = scandir($path);
$result = array('ok'=>0); //prepare output cz we will use json instead text/html
if($scan !== false){
    $result['ok']=1;
    $list = array();
    foreach($scan as $file){
        if(is_file($path.$file)){ //only file
            if(preg_match('/'.$keyword.'/', $file)) //is file containts keyword?
            $list[] = '<div><a href="readfile.php?file='.$file.'">'.$file.'</a></div>';
        }
    }
    $result['list'] = count($list) == 0 ? 'no file match': $list;
}else
    $result['msg'] = "failed open dir";

echo json_encode($result);

readfile.php

<?php
 // PHP script to allow the file to be downloaded
$filename = $_GET['file'];
$path = 'C:/xampp/htdocs/';
$fullPath = $path.$filename; //you need this
if (file_exists($fullPath)) {
  header('Content-Description: File Transfer');
  header('Content-Type: application/octet-stream');
  header('Content-Disposition: attachment; filename="'.basename($filename).'"');
  header('Expires: 0');
  header('Cache-Control: must-revalidate');
  header('Pragma: public');
  header('Content-Length: ' . filesize($fullPath));
  readfile($fullPath);
  exit;
 }
 ?>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]