单击结果后如何在实时 ajax 搜索中清除输入字段空白

Question

我有一个使用 PHP jQuery 和 ajax 的简单 ajax 实时搜索脚本。这一切都很好，但输入框没有完全清除，所以结果框不会消失，除非我手动清除它..

JS -

<script type="text/javascript">
        $(document).ready(function(){
            $('.search-box input[type="text"]').on("keyup input", function(){
                /* Get input value on change */
                var inputVal = $(this).val();
                var resultDropdown = $(this).siblings(".result");
                if(inputVal.length){
                    $.get("backend-search.php", {term: inputVal}).done(function(data){
                        // Display the returned data in browser
                        resultDropdown.html(data);
                    });

                } else{
                    resultDropdown.empty();
                }
            });

            // Set search input value on click of result item
            $(document).on("click", ".result", function(){
                $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
                $(this).parent(".result").empty();

            });
        });
    </script>

PHP -

$user = $_GET['user'];

$term = mysqli_real_escape_string($conn, $_REQUEST['term']);
if(isset($term)){
// Attempt select query execution
$sql = "SELECT * FROM prospects WHERE dealer_name LIKE '" . $term . "%'";
if($result = mysqli_query($conn, $sql)){
    if(mysqli_num_rows($result) > 0){
        while($row = mysqli_fetch_array($result)){
            $dealer_name = $row['dealer_name'];
            echo "<form method='post' class='editForm'>
             <input type='hidden' name='dealer' value='$dealer_name'/>
                        <input type='submit' id='subDealer' value='$dealer_name'/>
                    </form>";
        }
        // Close result set
    } else{
        echo "<p>No matches found</p>";
    }
} else{
    echo "ERROR: Could not able to execute $sql. " . mysqli_error($conn);
}
}

HTML -

 <div class="search-box">
     <input type="text" id="searchBox" autocomplete="off" placeholder="Search dealer..." />
     <div class="result"></div>
 </div>

就像它说的那样，这一切都有效，但输入字段 (#searchBox) 中有空白空格，这将不允许清除 .result..

谢谢！

Answer 1

试试下面的sn-p

// Set search input value on click of result item
$(document).on("click", ".result", function(){
    $(this).parents(".search-box").find('input[type="text"]').val($(this).text().trim());
});


$(document).on('click', 'input[type=submit]', function() {
   // This is NOT the best practice. But it works. Try to change your implementation to a better one!
   setTimeout(function() {
       $('.result').empty();
   }, 1000);
   return true;
}

Answer 2

使用 jQuery trim() 函数

 <script type="text/javascript">
            $(document).ready(function(){
                $('.search-box input[type="text"]').on("keyup input", function(){
                    /* Get input value on change */
                    var inputVal1 = $(this).val();
                    var inputVal = $.trim(inputVal1);
                    var resultDropdown = $(this).siblings(".result");
                    if(inputVal.length){
                        $.get("backend-search.php", {term: inputVal}).done(function(data){
                            // Display the returned data in browser
                            resultDropdown.html(data);
                        });

                    } else{
                        resultDropdown.empty();
                    }
                });

                // Set search input value on click of result item
                $(document).on("click", ".result", function(){
                    $(this).parents(".search-box").find('input[type="text"]').val($(this).text());
                    $(this).parent(".result").empty();

                });
            });
        </script>