1

jQuery の .val() メソッドが空白を処理する方法について混乱しています (それが jQuery の問題である場合)。

私の例は、私がゆっくりと開発している AJAX 提案ボックス機能を使用しています。フレームワークとして Codeigniter を使用します。

私はこのjQueryコードを持っています:

$(document).ready(function(){
    $("#suggestbox").hide();
    $("#searchboxinput").live("keyup", function(){
        if ($("#searchboxinput").val().length==0){
            $("#suggestbox").fadeOut(100);
        }else{
            $("#suggestbox").fadeIn(100);
            $("#sugresultcontain").load('http://localhost/ajaxtest/ajaxhandle/suggest/'+$("#searchboxinput").val()+' #loadsuggest');
        };
    });
});

「#suggestboxinput」は、次のようなテキスト入力です。

<div id="content" class="clear">
    <div id="searchwrap" class="clear">
        <div id="searchbox" class="float-left"><input id="searchboxinput" name="" value="" type="text"></div>
        <div id="searchbutton" class="float-right"><input id="searchbuttoninput" name="" type="button" value="Go"></div>
    </div>
    <div id="suggestbox" class="clear">
        <div id="suggesthead">Suggestions:</div>
        <div id="sugresultcontain"></div>
    </div>
</div>

次に、(コード イグナイターを使用して) .load() を処理するメソッドを次のように作成します。

public function suggest($q=''){

        $suggest = $this->ajax_handle->suggest();

        for($i=0; $i<count($suggest); $i++){
            $db[$i] = $suggest[$i]['firstname'].' '.$suggest[$i]['lastname'];
        }

        if(strlen($q)>0){
            $sugstr = '';
            $e = 0;

            for($f=0; $f<count($db); $f++){
                if (strtolower($q)==strtolower(substr($db[$f],0,strlen($q)))){
                    $sugresult[$e] = $db[$f];
                    $e++;
                }
            }

            if(isset($sugresult)){
                $data['sugresult'] = $sugresult;
                $this->load->view('ajaxref/suggest', $data);
            }else{
                $this->load->view('ajaxref/suggest');
            }
        }else{
            $this->load->view('ajaxref/suggest');
        }
    }

これはほぼ意図したとおりに機能します。ページをロードしてから、データベースからの名前が表示されるテキスト入力を使用すると (テキスト フィールドに従って)。名を入力すると問題なく動作し、フィールドの後にスペースをいくつ入れても表示され続けます (これは完璧です)。

ただし、問題は、1 つのスペース (Dominic Sore) または最初の文字または姓 (Dominic S) の後に姓を入力することにあります。提案ボックスに名前が表示されません。

入力ボックスで「+」記号を使用すると機能することを読みました。私はそれをテストしましたが、うまくいきました (Dominic + Sore は提案ボックスに Dominic Sore を出力します)。当然のことながら、ユーザーが使用したいすべてのスペースに「+」を入力させることはできません。

だから私はこれをどのように処理するのだろうか？私はたくさん読んでいますが、解決策が見つかりません。

ありがとう。

4

3 に答える 3

2

使用が機能することを考えると、変数を照合のために送信する前に変数を url エンコードするために+使用する価値があるかもしれません。encodeURIComponent()

$("#sugresultcontain").load('http://localhost/ajaxtest/ajaxhandle/suggest/'+encodeURIComponent($("#searchboxinput").val())+' #loadsuggest');

または、単純な置換を行うこともできます:

$('#searchboxinput').val().replace(/\w/g,'+');

しかしencodeURIComponent、より信頼性が高く、スペース文字だけでなくアポストロフィ (O'Neill) も適切にエンコードします。

参考文献:

于 2012-07-09T21:32:51.263 に答える
0

方法を試してください$.trim：

文字列の先頭と末尾から空白を削除します。

var txt = $.trim($("#searchboxinput").val()).replace(' ', '+')
于 2012-07-09T21:33:54.047 に答える
0

私が正しく理解していれば、問題はその行にあります

$("#sugresultcontain").load('http://localhost/ajaxtest/ajaxhandle/suggest/'+$("#searchboxinput").val()+' #loadsuggest');

このように考えてください。いくつかの部分を連結して文字列を作成しています。入力が含ま" something"れているとします。つまり、ロードしていることを意味します。

'http://localhost/ajaxtest/ajaxhandle/suggest/    something #loadsuggest'

これは明らかに意図したとおりには機能しません。あなたがする必要があるのは、入力から値を切り取り、有効な URL 文字のみが含まれていることを確認することです (そうしないと、入力内の / または ? が同じ理由でクエリを壊す可能性があります)。

それらの線に沿った何か：

var suggest_url_part = encodeURIComponent($("#searchboxinput").val().trim());
if (suggest_url_part.length) {    
  $("#sugresultcontain").load('http://localhost/ajaxtest/ajaxhandle/suggest/' + suggest_url_part + '#loadsuggest');
}
于 2012-07-09T21:37:10.140 に答える