AJAX الإكمال التلقائي (أو autosuggggger) مع إكمال علامة التبويب / التدوير التلقائي مشابه لإكمال سطر الأوامر Shell؟

StackOverflow https://stackoverflow.com/questions/1837555

سؤال

أقوم بتنفيذ ميزة Ajax AutoComplete / AutoSuggest، وليس فقط أرغب في القيام باقتراحات العرض المعتادة التي تشبه ما كتبه المستخدم، ولكن أود السماح للمستخدم بإجراء اكتمام جزئي لحفظ الكتابة.

لذلك، تخيل قاموس بلدي لديه هذه القيم في ذلك: "التفاح الأخضر"، "الكمثرى الأخضر"، "الفاكهة الخضراء"، "السماء الزرقاء"، "Blue Water"، "Blue Wake".

إذا كانت مستخدمي المستخدمين في "g"، يجب أن تكون الاقتراحات "التفاح الأخضر"، "الكمثرى الأخضر"، "الفاكهة الخضراء"، وأرغب في السماح للمستخدم بالكرب علامة التبويب أو شيء ما لتحديث استفساره إلى "أخضر" ثم يمكنهم كتابة "A" وسيكتتمل أن يكملوا "التفاح الأخضر".

أحاول طراز هذا بعد الانتهاء من سطر الأوامر Linux Shell.

هل يمكن أن توصي بالتحكم / البرنامج النصي الذي يفعل هذا؟ أو تعديل / تخصيص عنصر تحكم موجود؟

هل كانت مفيدة؟

المحلول

لا يتم دعم هذا النوع المحدد من الإكمال التلقائي في الإضافات الإكمال التلقائي الشعبية (ل JQuery، Scripty ...) لأن هذه عادة ما توفر واجهة مستخدم المنسدلة لاختيار المباراة المطلوبة.

لذلك دعونا نرترض أننا لم نحصل على حل خارج الصندوق. بو-ح. كيف يمكن أن يكون من الصعب كوده؟

// takes a text field and an array of strings for autocompletion
function autocomplete(input, data) {
  if (input.value.length == input.selectionStart && input.value.length == input.selectionEnd) {
    var candidates = []
    // filter data to find only strings that start with existing value
    for (var i=0; i < data.length; i++) {
      if (data[i].indexOf(input.value) == 0 && data[i].length > input.value.length)
        candidates.push(data[i])
    }

    if (candidates.length > 0) {
      // some candidates for autocompletion are found
      if (candidates.length == 1) input.value = candidates[0]
      else input.value = longestInCommon(candidates, input.value.length)
      return true
    }
  }
  return false
}

// finds the longest common substring in the given data set.
// takes an array of strings and a starting index
function longestInCommon(candidates, index) {
  var i, ch, memo
  do {
    memo = null
    for (i=0; i < candidates.length; i++) {
      ch = candidates[i].charAt(index)
      if (!ch) break
      if (!memo) memo = ch
      else if (ch != memo) break
    }
  } while (i == candidates.length && ++index)

  return candidates[0].slice(0, index)
}

اختبار الصفحة هنا - يجب أن تعمل في المتصفحات العادية. لدعم أي استخدام حدث الاستماع من prototype.js، jquery أو غير ذلك.

نصائح أخرى

إذا كنت تستخدم jQuery، وهو مكون إضافي رائع http://bassistance.de/jquery-plugins/jquery-plugin-autocolpe/وبعد ما عليك سوى استخدام CSS لإخفاء المربع المنسدلة، واترك الوظائف الكاملة لعلامة التبويب.

أعتقد أنه سيكون من السهل إنشاء مسافة جائق لنفسك ...

على طول أسطر الاستماع لمفتاح علامة التبويب عند الضغط على المفتاح TAB، TRIGGER TAB: اضغط على Input.Autotab

   $(document).keydown(function(e){ if (e.keyCode = (tab-key?)){
       $('input.autotab').trigger('tab:press');
   });

BIND INPUT.AUTOTAB's Tab: اضغط على الحدث (في كل حلقة ... إذا التركيز == صحيح إلخ) إما بحثا عن صفيف JavaScript، أو طلب XHR، (AJAX)، ثم قم بتعيين قيمة الإدخال هذه البيانات التي تم إرجاعها.

  $('input.autotab').bind('tab:press', function(){
      if (this.hasFocus){
         this.disabled = true;
         $.get('/autotab', { q: $(this).val() }, function(response){
               $(this).val(response);
               this.disabled = false;
         }, function(){ this.disabled = false; });
      }
  });

في برنامج التشغيل التلقائي الخاص بك النصي، اكتبها مرة واحدة بمجرد مطابقة القيمة أكثر من مرة واحدة في قاعدة البيانات (استخدم a حلقة مع فهرس، توقف عن عنصر الفهرس حيث يتم مطابقة العنصر الأول)، وإرجاع القيمة حتى تلك النقطة.

ستكون أبسط طريقة لاستخدام JQuery و Plugin AutoColped. تبحث في HTML Stackoverflow، يبدو أنهم يستخدمون نفس الأشياء. يبدو أن العمل جيدا لمعظم المتصفحات. يحتوي البرنامج المساعد أيضا على عرض توضيحي شامل يجب مساعدتك في معرفة كيفية تطبيقه لاحتياجاتك المحددة.

إليك عينة سريعة من الصفحة الرئيسية الإضافية:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/demo/main.css" type="text/css" />
  <link rel="stylesheet" href="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.css" type="text/css" />
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.bgiframe.min.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/lib/jquery.dimensions.js"></script>
  <script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/autocomplete/jquery.autocomplete.js"></script>
  <script>
  $(document).ready(function(){
    var data = "Core Selectors Attributes Traversing Manipulation CSS Events Effects Ajax Utilities".split(" ");
    $("#example").autocomplete(data);
  });
  </script>

</head>
<body>
  API Reference: <input id="example" /> (try "C" or "E")
</body>
</html>

أكثر ليتم العثور عليها هنا http://docs.jquery.com/plugins/autoColpe.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top