मैं अपनी परियोजना में एक गतिशील खोज फ़ंक्शन पेश करने का प्रयास कर रहा हूं। मैंने अपने विचार में एक खोज फ़ॉर्म बनाया है जो keyup पर सबमिट करता है, लेकिन मुझे जिस समस्या का सामना नहीं करना पड़ रहा है वह यह है कि जब दृश्य पुनः लोड होता है, तो टेक्स्ट बॉक्स अब फ़ोकस में नहीं होता है और इसलिए उपयोगकर्ता को वापस क्लिक करने की आवश्यकता होती है यह जो स्पष्ट रूप से आदर्श नहीं है।

मेरा विचार निम्नानुसार स्थापित किया गया है:

<form id="searchForm" asp-action="Index" method="get">

    <div class="row">
        <div class="col-9">
            <input type="text" id="fooSearch" name="searchString" value="@ViewData["currentFilter"]" class="form-control" />
        </div>
        <div class="col-3">
            <div class="row">
                <div class="col-6">
                    <input type="submit" value="Search" class="btn btn-outline-secondary form-control" />
                </div>
                <div class="col-6">
                    <a asp-action="Index" asp-route-recent="true" class="btn btn-outline-secondary form-control">Recent</a>
                </div>
            </div>
        </div>
    </div>
</form>

keyup पर सबमिट करने के लिए निम्नलिखित JQuery स्क्रिप्ट के साथ

        $(function () {
            $('#fooSearch').keyup(function () {
                $('#searchForm').submit();
            });
        });
    </script>

क्या कोई मुझे डीओएम लोड होने पर खोज टेक्स्टबॉक्स पर फोकस बनाए रखने में मदद कर सकता है?

0
esotericbob 27 फरवरी 2020, 01:26
क्या आपने रोकथाम की कोशिश की?
 – 
jfiggins
27 फरवरी 2020, 01:27
कुछ फैशन (स्थानीय भंडारण आदि) में स्टोर दस्तावेज़। सक्रिय तत्व जमा करने से पहले पेज लोड पर फोकस सेट करें
 – 
Bryan Dellinger
27 फरवरी 2020, 01:40
क्या फॉर्म एसिंक्रोनस सबमिट है? या पृष्ठ पुनः लोड हो रहा है?
 – 
Anis R.
27 फरवरी 2020, 02:00

3 जवाब

सर्चबार पर फोकस वापस करने के लिए, आप jQuery के focus() का उपयोग कर सकते हैं, जैसे:

$("#fooSearch").focus();

अब, आप इसे कहां रखते हैं, यह इस बात पर निर्भर करता है कि आपका फॉर्म सबमिट सिंक्रोनस है (और पेज को फिर से लोड करता है) या एसिंक्रोनस।

अगर सबमिट एसिंक्रोनस है, तो आप इसे अपने keyup ईवेंट हैंडलर में सबमिट करने वाले कोड के ठीक बाद में रख सकते हैं:

$('#fooSearch').keyup(function () {
    $('#searchForm').submit();
    $("#fooSearch").focus(); //focus back on the search bar
});

अन्यथा, आपको किसी onload ईवेंट से focus() को कॉल करना होगा:

$(document).ready(function() {
    $("#fooSearch").focus();
});
0
Anis R. 27 फरवरी 2020, 02:04

सभी मामलों में, पहले लोड या पुनः लोड करें (सबमिट करें), फोकस खोज टेक्स्टबॉक्स पर होना चाहिए, इसलिए मुझे लगता है कि आप टेक्स्टबॉक्स को लोड पर केंद्रित कर सकते हैं।

$(function() { $("#fooSearch").focus();});

आप जिस समस्या का सामना कर सकते हैं वह यह है कि कर्सर कीवर्ड के अंत में नहीं होगा। इसलिए मुझे लगता है कि हर बार जब उपयोगकर्ता कीवर्ड बदलते हैं तो परिणाम अपडेट करने के लिए अजाक्स का उपयोग करना सबसे अच्छा विकल्प है। हो सकता है कि प्रत्येक अपडेट से पहले कुछ सेकंड प्रतीक्षा करना भी एक अच्छा विचार हो।

0
Zan RAKOTO 27 फरवरी 2020, 04:26

यदि आप एचटीएमएल 5 का उपयोग कर रहे हैं तो आप अपने एचटीएमएल टैग में ऑटोफोकस जोड़ सकते हैं जैसे कुछ:

<input type="text" id="fooSearch"  autofocus ="autofocus" name="searchString" value="@ViewData["currentFilter"]" class="form-control" />
0
Nick Mehrdad Babaki 27 फरवरी 2020, 13:19